Thymeleaf 정리-2 [기본적인 표현방법]

Thymeleaf 표현방법

지역변수(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>

위의 내용은 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>

th:with문은 변수를 지정할 수 있으며 ',' 구분자를 통해서 여러 개의 지역변수를 지정할 수 있습니다. 

동일한 속성에 정의된 변수는 재사용이 가능합니다.

1

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

cs

[company를 선언하고 accounts의 파라미터로 설정]

또한 아래와 같이 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 변수를 사용 가능합니다.

속성 우선순위

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

 

주석 & 블록

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

하지만 Thymeleaf에서만 처리되는 특수한 주석 두 종류가 있습니다. 첫번째는 Parser-level 주석입니다.

1. Thymeleaf 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>

th:remove 속성과 비슷한 용도로 사용할 수 있습니다.

2. Thymeleaf prototype-only comment blocks

두번째 특수 주석은 Parser-level 주석과 반대되는 개념의 주석으로 정적페이지에서 주석으로 처리가 되고 Thymeleaf 처리 후 나타나게 되는 주석입니다.

1 2 3 4 5 6 7

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

cs

위와 같이 <!--/*/ /*/--> 표현으로 쓰게 되며 정적페이지에서는 hello!goodbye! 로만 보여지게 되지만 thymeleaf에서 처리하게 되면 

1 2 3 4 5 6 7

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

cs

위와 같이 처리되어 hello!  와  goodbye! 사이에 별도의 서버 사이드 처리가 가능하게 됩니다.

3. Thymeleaf prototype-only comment blocks

th:block 은 Thymeleaf가 처리하게 되면 자신의 포함된 속성을 처리하고 사라지게 됩니다.

<table>
  <th:block th:each="user : ${users}">
    <tr>
        <td th:text="${user.login}">...</td>
        <td th:text="${user.name}">...</td>
    </tr>
    <tr>
        <td colspan="2" th:text="${user.address}">...</td>
    </tr>
  </th:block>
</table>

위의 예시에서는 2개의 tr 태그가 반복되면서 생성되게 됩니다.

th:block은 prototype-only주석과 함께 사용할 때 특히 유용합니다.

<table>
    <!--/*/ <th:block th:each="user : ${users}"> /*/-->
    <tr>
        <td th:text="${user.login}">...</td>
        <td th:text="${user.name}">...</td>
    </tr>
    <tr>
        <td colspan="2" th:text="${user.address}">...</td>
    </tr>
    <!--/*/ </th:block> /*/-->
</table>

prototype-only 주석과 함께 사용하게 되면 정적인 페이지에서는 두개의 tr만 보였다가 Thymeleaf처리가되면 1번째 예시 처럼 반복처리가 됩니다.

 

Inlining

1. Text inlining

th:text 속성을 사용하여 대부분의 문자 처리가 가능하지만 HTML에 직접 표현할 수 있습니다.

1

<p>Hello, [[${session.user.name}]]!</p>

cs

위의 예제를 다음과 같이 표현할 수 있습니다.

<p>Hello, <span th:text="${session.user.name}">Sebastian</span>!</p>

이렇게 [[   ]] 문법을 사용하기 위해서는 th:inline 속성이 필요합니다. 실제로는 다음과 같이 다용하여야합니다.

inline모드는 text모드와 javascript모드가 있습니다. 

지금은 text inline이 필요하므로 th:inline="text" 값을 정의하겠습니다.

<p th:inline="text">Hello, [[${session.user.name}]]!</p>

모든 태그에 th:inline 속성을 표시할 필요는 없고 다음과 같이 상위 태그에 th:inline 속성을 정의하면 모든 하위 노드에서 inline문법을 사용 할 수 있습니다.

<body th:inline="text">
 
   ...
 
   <p>Hello, [[${session.user.name}]]!</p>
 
   ...
 
</body>

이렇게 간편하게 th:text 속성없이 텍스트 값을 바인딩 할 수 있습니다. 

하지만 이렇게 사용하게 되면 inline 표현식이 그대로 나타나게 되므로 더이상 프로토타입 페이지로 사용하기 어려울 수 있습니다.

2. Script inlining(Javascript and Dart)

스트립트 inline 기능은 javascript 와 Dart를 지원합니다.

<script th:inline="javascript">
/*<![CDATA[*/
    ...
 
    var username = [[${session.user.name}]];
 
    ...
/*]]>*/
</script>

위와 같이 script 태그에 th:inline="javascript" 속성을 정의하면 그 안에 포함된 스크립트에서는 [[  ]]표현식으로 서버 데이터를 스크립트 영역에 표현할 수 있습니다.

하지만 여기서 문제가 있습니다. 정적인 페이지로 열었을 때 스크립트 영역의 [[  ]] 표현식은 오류로 인식되어 프로토타입페이지로는 사용이 어렵습니다.

이런 문제는 다음과 같이 /* [[  ]] */ 표현식을 사용하게되면 해결할 수 있습니다.

1 2 3 4 5 6 7 8 9

<script th:inline="javascript"> /*<![CDATA[*/     ...       var username = /*[[${session.user.name}]]*/ 'Sebastian';       ... /*]]>*/ </script> Colored by Color Scripter

cs

위와 같이 표현하게되면 정적인 페이지는 /*[[${session.user.name}]]*/ 부분이 주석처리 되어 username 변수의 값이
'Sebastian' 값으로 정의가 됩니다.

하지만 Thymeleaf 처리가 되면 /*[[ ]]*/ 구문에 포함된 표현식을 실행하게 되고 그 뒤에 있는 모든 코드는 제거 되어 실제 사용자의 이름을 가져올 수 있습니다.

이렇게 문자열값 뿐만 아니라 다음과 같이 다양한 형식의 값을 표현할 수 있습니다.

• Strings
• Numbers
• Booleans
• Arrays
• Collections
• Maps
• Beans (objects with getter and setter methods)

다음과 같이 Map 타입의 서버 변수를 표현하게 되면 Javascript Object 형식으로 자동으로 변환해서 나타냅니다.

<script th:inline="javascript">
/*<![CDATA[*/
    ...
 
    var user = /*[[${session.user}]]*/ null;
 
    ...
/*]]>*/
</script>

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

정적인 페이지서는 user의 값은 null입니다.

 

다음은 Adding Code입니다.

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

1 2 3 4 5 6 7 8 9 10

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

cs

위와 같이 /*[+  +]*/  표현식으로 작성하게 되면 정적인 페이지에서는 주석으로 처리되고 Thymeleaf가 처리되면 /*[+  +]*/  표현식 안의 스크립트 내용이 작성됩니다. Thymeleaf처리 후 스크립트 내용은 다음과 같습니다.

var x = 23;
 
var msg  = 'This is a working application';
 
var f = function() {
...

 

다음으로는 Removing Code입니다.

Adding Code와는 반대로 정적인페이지에서만 스크립트코드를 작성하고 싶을 때 사용합니다.

표현식은 /*[- */   /* -]*/ 입니다.

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에 관한 기본적인 사용법을 마치면서 자세한 내용은 원문을 통해 확인바랍니다.

http://www.thymeleaf.org