thymeleaf (server-side template engine) 사용법 정리 - 2

 

 

 

지역변수 (Local Variables)

Thymeleaf에서 지역변수의 범위는 변수가 정의된 DOM을 포함한 하위의 DOM까지를 포함합니다.

예를들면 다음과 같습니다.

<tr th:each="prod : ${prods}">
        <td th:text="${prod.name}">Onions</td>
        <td th:text="${prod.price}">2.41</td>
</tr>

위 fragment는 each 속성을 통한 반복구문인데 여기에 사용된 prod는 <tr>를 포함하여 그 하위의 태그에서만 사용이 가능합니다.

위와 같이 반복문 이외에도 th:with속성을 이용하여 지역변수를 사용할수 있는데 구문은 다음과 같습니다.

<div th:with="firstPer=${persons[0]},secondPer=${{persons[1]}">
  <p>
    The name of the first person is <span th:text="${firstPer.name}">Tom</span>.
    The name of the second person is <span th:text="${secondPer.name}">Jeny</span>.
  </p>
</div>

1

<div th:with="company=${user.company + ' Co.'},account=${accounts[company]}">...</div>

cs

 

또한 아래와 같이 th:with는 우선순위가 비교적 높기때문에 하나의 태그의 다양한 속성내에서 사용이 가능합니다.

<p>
  Today is: 
  <span th:with="df=#{date.format}" 
        th:text="${#calendars.format(today,df)}">13 February 2011</span>
</p>

df 라는 변수를 정의하고 th:text에서 df 변수의 사용이 가능합니다. 여기에서 날짜데이터를 바인드 시키기위해 span태그가 사용이 되었는데 span태그가 불필요 하다면 span 대신 th:block을 사용하면 됩니다.

 

속성 우선순위

Thymeleaf 속성들의 우선순위는 다음 표와 같습니다.

Order	Feature	Attributes
1	Fragment inclusion	th:include th:replace
2	Fragment iteration	th:each
3	Conditional evaluation	th:if th:unless th:switch th:case
4	Local variable definition	th:object th:with
5	General attribute modification	th:attr th:attrprepend th:attrappend
6	Specific attribute modification	th:value th:href th:src ...
7	Text (tag body modification)	th:text th:utext
8	Fragment specification	th:fragment
9	Fragment removal	th:remove

 

태그내의 정의된 속성의 순서와 별개로 위와같은 순서대로 속성이 적용 되므로 다음과 같이 표현을 해도 무방합니다. 다만 읽기는 힘들겠죠?

<ul>
  <li th:text="${item.description}" th:each="item : ${items}">Item description here...</li>
</ul>

 

 

주석 & 블록

HTML과 XML에서 사용되는 표준 주석구문인 <!-- ... --> 은 thymeleaf 에서 별도로 처리하지 않고 그대로 표현합니다.

하지만 thymeleaf에서만 처리되는 특수한 주석이 2종류가 더 있는데요. 첫번째는 Parser-level 주석입니다.

1. Thymelef parser-level comments blocks

Parser-level주석은 정적인 페이지에서는 주석으로 남겨져있다가 thymeleaf 처리가 될때 제거되는 주석입니다.

<!--/* This code will be removed at thymeleaf parsing time! */-->
 

<!--/*  와 */--> 사이의 내용은 thymeleaf 처리후 제거가 되므로 불필요한 주석을 클라이언트에 노출시키지 않게 처리가 가능합니다.

이뿐만 아니라 다음과 같이 사용하면 정적인 페이지에서 DOM을 표현했다가 thymeleaf 처리후 제거가 되도록 표현이 가능합니다.

<!--/*--> 
  <div>
     you can see me only before thymeleaf processes me!
  </div>
<!--*/-->

<table>
   <tr th:each="x : ${xs}">
     ...
   </tr>
   <!--/*-->
   <tr>
     ...
   </tr>
   <tr>
     ...
   </tr>
   <!--*/-->
</table>

1편에서 소개해드린 th:remove 속성과 비슷한 용도로 사용이 가능하겠네요.

 

2. Thymelef prototype-only comment blocks

그다음 특수 주석은 Parser-level 주석과 약간 반대되는 개념의 주석인데요. 정적페이지에서 주석으로 처리가 되고 thymeleaf처리후 나타나게 되는 주석입니다.

<span>hello!</span>
<!--/*/
  <div th:text="${...}">
    ...
  </div>
/*/-->
<span>goodbye!</span>

위의 표현식을 thymeleaf처리하게 되면 다음과 같이 표현됩니다.

<script th:inline="javascript">
/*<![CDATA[*/
    ...
 
    var user = {'age':null,'firstName':'John','lastName':'Apricot',
                'name':'John Apricot','nationality':'Antarctica'};
 
    ...
/*]]>*/
</script>

정적 페이지에서는 user 변수의 값은 null이 겠죠?

자, 다음은 Adding Code 입니다.

thymeleaf 처리가 되었을때만 특정 스크립트를 추가하고 싶을때 사용할수 있는 기능으로 표현식은 다음과 같습니다.

 

var x = 23;
 
/*[+
 
var msg  = 'This is a working application';
 
+]*/
 
var f = function() {
    ...

var x = 23; 
 
/*[- */
 
var msg  = 'This is a non-working template'; 
 
/* -]*/
 
var f = function() { 
... 

보시는것과 같이 정적 페이지에서는 msg라는 변수가 정의가 되고 값이 할당 되지만 thymeleaf를 처리하게 되면 var msg  = 'This is a non-working template'; 부분이 삭제 됩니다.

 

..

네, 이렇게 Thymeleaf의 기본적인 사용법 정리를 마치도록 하겠습니다.

Thymeleaf를 처음 접해보는 분들에게는 조금이라도 도움이 되길 바라며, 해당 포스팅에 포함된 내용의 대부분은 http://www.thymeleaf.org 에서 원문으로 확인이 가능합니다.

 

---

thymeleaf 시리즈 1편 내용을 살펴보고 싶다면, 아래 링크를 클릭해주세요.

▶ thymeleaf (server-side template engine) 사용법 정리 - 1

---