타임리프 (Thymeleaf) 란?

- 타임리프 템플릿 이란? -

템플릿 엔진, th:xx 형식으로 속성을 html 태그에 추가하여 값이나 처리 등을 페이지에 심을 수 있다.

JSP, 그루비 등 다른 템플릿도 스프링 부트에서 사용 가능하지만 타임리프가 가장 많이 쓰인다고 한다.

-타임리프 템플릿 문법 및 표현방법 정리-

th:text

th:text는 태그 안에 들어가는 텍스트 값이다.

<span th:text="${eventFvrDtl.winRnkg}"></span>

cs

th:if, th:unless, th:value

th:if는 if, th:unless는 else 표현이다.

th:value는 태그 안의 value 이다.

<th:block th:if="${eventPtcpPsbOrdData != null && #lists.size(eventPtcpPsbOrdData.eventPtcpOrdInfoList) > 0}">

    <input type="hidden" id="ibx_TotalPurAplAmt" th:value="${totalPurAplAmt}"/>

</th:block>

<th:block th:unless="${eventPtcpPsbOrdData != null && #lists.size(eventPtcpPsbOrdData.eventPtcpOrdInfoList) > 0}">

    <input type="hidden" id="ibx_TotalPurAplAmt" value="0"/>

</th:block>  

th:utext (unescaped text)

th:utext는 <div></div> 같은 태그 형식의 코드를 삽입하고 싶을 때 사용한다.

태그형식의 텍스트가 들어올시 태그로 인식한다.

<!-- HTML 컨텐츠 영역 -->

<th:block th:utext="${#campaignUtils.unescapeHtml(eventDispTempleteInfo.htmlContents)}"></th:block>

cs

th:fagment

include와 비슷하다.

특정 영역을 가져와서 나타낼 수 있다.

예를 들어 페이지마다 각각의 게시판을 가지고 싶은 경우

포함하는 곳.

ex) eventPage1.html

<th:block th:if="${#lists.size(eventDispTemplateCornerList)} > 0" th:each="eventDispTemplateCorner : ${eventDispTemplateCornerList}">

    <!-- 이벤트 템플릿 코너 -->

    <th:block th:include="${eventDispTemplateCorner.cmpnTmplFileUrl} :: corner (${eventDispTemplateCorner.cmpnNo}, ${eventData.eventBaseInfo.eventPtcpPsbYn})"></th:block>

</th:block>

받는 곳.

ex) board.html

<th:block th:fragment="corner (cmpnNo, eventPtcpPsbYn)">

    <div class="content_title noline">

        <p class="title">게시판</p>

    </div>

</th:block>

controller을 거쳐 화면으로 가져온 데이터를 스크립트로 제어할 때

// controller

ModelAndView mv;

mv.addObject("eventData", eventData);

return mv

// controller를 거쳐 화면으로 가져온 데이터를 스크립트로 제어할때

var data1 = [[${eventData}]];

var eventPtcpPsbYn = [[${#strings.defaultString(eventData.eventBaseInfo.eventPtcpPsbYn, 'Y')}]];

cs

태그 안의 attribute를 타임리프로 정의할 때

// 태그 안의 attribute를 타임리프로 정의할때

<div id="myDiv1" th:attr="usemap=|#E_${eventData.eventBaseInfo.cmpnNo}|">

</div>

 

// 정의된 결과

<div id="myDiv1" usemap="#E_21082">

</div>

출처

https://shlee0882.tistory.com/134