타임리프(Thymeleaf)에서 프래그먼트에 자바스크립트 함수 전달하기

2024-07-15

---

사진: Unsplash 의 Mehdi El marouazi

---

 

타임리프(Thymeleaf)는 서버 사이드 템플릿 엔진으로, HTML을 템플릿으로 사용하여 동적 웹 페이지를 생성하는 데 유용합니다. 때로는 자바스크립트 함수를 프래그먼트에 직접 전달해야 할 때가 있습니다. 이 글에서는 타임리프에서 프래그먼트에 자바스크립트 함수를 전달하는 방법을 설명합니다.

---

1. 프래그먼트 정의하기

먼저, 자바스크립트 함수를 호출할 수 있도록 프래그먼트를 정의합니다. 프래그먼트는 th:fragment 속성을 사용하여 정의할 수 있습니다.

 

<div th:fragment="accordion_enable(subTitle, timeTxt, subTitleColor, timeTxtShow, btnShow, btnShowText, btnFunction)">
    <div class="accordion_list">
        <div class="accordion_txt sub_title_sm" th:text="${subTitle}" th:style="'color:'+ ${subTitleColor} +';'"></div>
        <div class="accordion_time_txt" th:if="${timeTxtShow}" th:text="${timeTxt}"></div>
        <button th:if="${btnShow}" th:text="${btnShowText}" th:onclick="${btnFunction}"></button>
    </div>
</div>

---

2. 프래그먼트 호출하기

타임리프 문법을 사용하여 프래그먼트를 호출할 때, 자바스크립트 함수와 매개변수를 문자열로 전달합니다.

 

<div class="accordion_list" 
    th:replace="~{${'component/accordion/accordion_enable.html'} :: accordion_enable(
        subTitle=${'subTitle'},
        timeTxt=${'timeTxt'},
        subTitleColor=${'red'},
        timeTxtShow=${true},
        btnShow=${true},
        btnShowText=${'btnShowText'},
        btnFunction=${'btnFncTest(' + ${1} + ')'}
    )}">
</div>

---

3. 자바스크립트 함수 정의하기

마지막으로, 호출하려는 자바스크립트 함수를 정의합니다.

 

function btnFncTest(number){
    console.log(number);
    // 다른 로직 추가
}

 

이와 같이, 타임리프에서 프래그먼트에 자바스크립트 함수를 전달하고, 해당 프래그먼트 내에서 이를 사용할 수 있습니다. 이 방법은 문자열을 적절하게 인코딩하여 HTML 속성에 할당하는 방식으로 처리되며, 동적인 웹 페이지를 생성하는 데 매우 유용합니다.

---

메인 이미지 출처 : 사진: Unsplash의Mehdi El marouazi