Thymeleaf 사용법

타임리프(Thymeleaf)란 뷰 템플릿으로 컨트롤러에서 리턴된 데이터들을 페이지에 동적으로 렌더링 해줍니다.

 

※ Thymeleaf 사용법

 : 타임리프 사용 시 기본 문법은 data-th-text, th:text 둘 중 아무거나 사용해도 상관없어요.

  ( html에서 사용하는 href, src, text, style 등등 타임리프에서 사용할 때는

    data-th-href, data-th-src 이런 식으로 넣어주면 됩니다. )

 

 

 : 값을 그대로 표출할 때

<th:block data-th-text="${text}"></th:block>

or 

<span>[[ ${text} ]]</span>

 

 : Thymeleaf html 태그가 들어가는 데이터 값을 그대로 삽입하고 싶을 때 (div, span, img, p, strong 등)

<th:block data-th-utext="${text}"></th:block>

 : Thymeleaf if, else 구문

 ( 자바에서 사용하는 if, else와 동일하게 작동 )

<th:block data-th-if="${test == null}"></th:block>
<th:block data-th-unless="${test == null}"></th:block>

 

 : Thymeleaf and, or 구문

( if 조건 여러개 가능 )

<th:block data-th-if="${view == null and view == ''}">
<th:block data-th-if="${view != '홍길동' or view != '길동'}">

 

 : Thymeleaf 반복문 

 ( LIST 형식으로 리턴 된 값을 6번 출력)

<span data-th-each="i : ${#numbers.sequence(0,5)}" data-th-if="${i < #lists.size(LIST)}" data-th-text="${LIST[i]?.title}"></span>

 

 : Thymeleaf switch ~ case 문

<th:block th:switch="${username}"> 
    <span th:case="홍길동">홍길동님 환영합니다</span> 
    <span th:case="길동이">길동님 환영합니다</span> 
</th:block>

 

: Thymeleaf 문자열 비교

<th:block data-th-if="${#strings.equals(userName, testName)}"></th:block>

 

 : Thymeleaf 문자열 합치기

<span data-th-text="|${username}님 환영합니다|"></span>

 

 : Thymeleaf 문자열, 배열(array), 리스트(list), 셋(sets)이 비어 있는지 확인

${#strings.isEmpty(title)} 
${#strings.arrayIsEmpty(array)} 
${#strings.listIsEmpty(list)} 
${#strings.setIsEmpty(set)}

 

 : Thymeleaf map 키 존재 여부 확인

 ( map으로 리턴한 menu에서 menuArea 키 값이 존재하는지 확인 )

<th:block data-th-if="${not #maps.isEmpty(menu)} and ${#maps.containsKey(menu, 'menuArea')}"></th:block>

 

: Thymeleaf 동적으로 클래스 추가

 ( LIST 반복문을 돌리면서 첫번째 값일 경우 active 클래스 추가 )

<div data-th-each="i : ${#numbers.sequence(0,1)}" data-th-if="${i < #lists.size(LIST)}" data-th-classappend="${i == 0} ? 'active':''">
</div>

 

 : Thymeleaf 변수로 지정하여 값을 사용하고 싶을 때

 ( data-th-with를 사용하면 변수와 변수 값 지정이 가능 )

<th:block data-th-with="SIZE='123', view='/main'">
  <a data-th-href="${view}"></a>
</th:block>

 

 : Thymeleaf style 지정

<div th:style="|background: url(${url}) background-size: cover|"></div>

 

 : Thymeleaf 현재 날짜 표출

<span data-th-text="${#dates.format(#dates.createNow(), 'yyyy-MM-dd HH:mm:ss')}"></span>

 

 

 : Thymeleaf secutiry 인증 정보 여부

 ( 타임리프에서 로그인, 로그아웃에 대한 이벤트를 줄 수 있다. )

<th:block sec:authorize="isAuthenticated()"> 로그인 정보 있음 </th:block>
<th:block sec:authorize="isAuthenticated() == false"> 로그인 정보 없음 </th:block>

 

 : Thymeleaf security에서 인증받은 객체가 존재하는지 확인

<th:block data-th-if="${#authorization.getAuthentication() != null and #authorization.expression('isAuthenticated()')}">
</th:block>

 

 : property, yml 에서 값 가져와서 사용

<a data-th-href="${@environment.getProperty('app.url.logout')}"></a>

 

: 콤마(,) 구분기호 설정 ( 천단위마다 콤마 찍기 )

<span data-th-text="${#numbers.formatInteger(price, 0, 'COMMA')}"></span>