Thymeleaf 문법 정리

타임리프 문법 및 표현방법 정리하기

1. th:text

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

 
<span th:text="${userInfo.userName}"></span>

 

2. th:if, th:unless, th:value 

th:if는 if, th:unless는 else 표현이다. th:value는 태그 안의 value임. if의 조건이 맞으면 아래의 input 태그가 보인다.

<th:block th:if="${userData != null && #Lists.size(userData.userLiist) > 0}">
    <input type="hidden" id="userDataCnt" th:value="${userDataInfoCnt}"/>
</th:block>
<th:block th:unless="${userData != null && #Lists.size(userData.userLiist) > 0}">
    <input type="hidden" id="userDataCnt" value="0"/>
</th:block> 

3. th:utext (unescaped text)

th:utext는 <span></span>같은 태그형식의 코드를 삽입하고 싶을때 사용함. 태그형식의 텍스트 들어올시 태그로 인식함.

<!-- HTML 컨텐츠 영역 -->
<th:block th:utext="${#campaignUtils.unescapeHtml(htmlInfo.htmlContents)}"></th:block

 

4.th:with

th:with는 변수형태의 값을 재정의한 것이다. memberIdx의 변수를 값이 있다면 정의하고 없다면 공백으로 정의함.

<th:block th:with="memberIdx=${#strings.defaultString(memberInfo.memberIdx, '')}">
</th:block>

 

5.th:switch , th:case

switch case 문과 같다. typeCd 값이 이럴때 case1, case2 빠지고  그 외에 것은 th:case=* 로 빠지게 됨.

<div th:switch="${bbsInfo.typeCd}" class="event_gift">
    <p th:case="${#constants.CD_DISCOUNT}" class="evt evttype02">
        <th:block th:switch="${kndCd}">
            <span th:case="${#constants.FREE_CPN}" th:text="${kndCdNm}" class="tx"></span>
            <span th:case="*" class="tx">
                <th:block th:text="${kndCdNm}"></th:block>
            </span>
        </th:block>
    </p>
    <p th:case="${#constants.CD_ACCUMULATION}" class="evt evttype02">
        <span class="ty" th:text="${kndCdNm}"></span>
        <span class="tx" th:text="${#numbers.formatInteger(bbsInfo.dtlCnts, 3, 'COMMA')}"></span>
    </p>
    <p th:case="*" class="evt evttype02">
        <span class="tx" th:text="${bbsInfo.dtlCnts}"></span>
    </p>
</div>

 

6. th:fagment

include와 비슷함.  특정 영역을 가져와서 나타낼 수 있음.

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

포함하는 페이지

ex) bbsPage.html

<th:block th:if="${#Lists.size(bbsTemplateCornerList)} > 0" th:each="bbsTemplateCorner : ${bbsTemplateCornerList}">
    <!-- 게시판 템플릿 코너 -->
    <th:block th:include="${bbsTemplateCorner.bbsFileUrl} :: corner (${bbsTemplateCorner.bbsNo}, ${bbsData.bbsInfo.bbsDelYn})"></th:block>
</th:block>

 

받는 페이지

ex) bbs.html

<th:block th:fragment="corner (bbsNo, bbsDelYn)">
    <div class="content_title noline">
        <p class="title">게시판</p>
    </div>
</th:block>

 

7. controller를 거쳐 화면으로 가져온 데이터(Object)를 스크립트로 제어하기

// controller
ModelAndView mv;
mv.addObject("bbsData", bbsData);
return mv

 

// controller를 거쳐 화면으로 가져온 데이터를 스크립트로 제어하기
var data = [[${bbsData}]];
var bbsDelYn = [[${#strings.defaultString(bbsData.bbsInfo.bbsDelYn, 'Y')}]];

 

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

// 태그 안의 attribute를 Thymeleaf로 정의할때
<div id="setDiv" th:attr="usemap=|#VALUE_${bbsData.bbsInfo.bbsNo}|">
</div>
 
// 정의된 결과
<div id="setDiv" usemap="#VALUE_1234">
</div>

 

9. 스트링 날짜형식의 문자열(yyyymmdd) > (yyyy-mm-dd)출력하기

타임리프에서 제공하는 temporals 메서드를 사용. 만약에 오류가난다면 jar를 추가해야한다.

<td th:text="${#temporals.createDate(bbsInfo.regDate, 'yyyyMMdd')}"></td>

10. select 에서의 사용

<select class="form-control" id="goods" name="goods">
    <option th:each="goodList : ${goodList}" th:value="${goodList.code}" th:text="${goodList.name}"></option>
</select>

서버에서 받은 object를 each문법으로 간단하게 셀렉트 옵션을 생성 할 수 있다.