[Spring-Boot] Thymeleaf 2: Thymeleaf 문법

티스토리 뷰

[JAVA]/Spring-Boot

[Spring-Boot] Thymeleaf 2: Thymeleaf 문법

춘햄 2021. 7. 8. 18:03

직전 포스팅에서 Thymeleaf의 일반적인 구조를 간단하게 확인했다. 이번 포스팅은 Thymeleaf가 사용하는 조건문, 반복문 등과 같은 문법들과 사용할 수 있는 표현식에 대하여 정리하려고 한다.

Thymeleaf-Reference: https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#introducing-thymeleaf

Tutorial: Using Thymeleaf

1 Introducing Thymeleaf 1.1 What is Thymeleaf? Thymeleaf is a modern server-side Java template engine for both web and standalone environments, capable of processing HTML, XML, JavaScript, CSS and even plain text. The main goal of Thymeleaf is to provide a

www.thymeleaf.org

Thymeleaf은 HTML 태그 중에서 th 태그를 이용하여 데이터를 표현하는 방식이다.

th 태그를 사용하기 위해서는 <head> 태그 상단에 아래와 같이 선언이 되어 있어야 한다.

<html lang="en" xmlns:th="http://www.thymeleaf.org">

우선 가장 기본적인 데이터의 표현은 다음과 같다.

1. 표현식

1) 변수: ${ }

2) 선택 변수(세션): *{ }

3) 메시지: #{ }

4) 링크: @{ }

2. 리터럴

1) 텍스트 : ‘one text’, ‘Another one’,…

2) 숫자 : 0, 34, 1.0, …

3) boolean : true, false

4) Null : null

5) token : one, sometext, main, …

3. 문자 제어

1) 문자열 연결: +

2) 문자 대체: |The name is ${name}|

4. 연산

1) Binary: +, -, *, /, %

2) 음수 표현: -

5. boolean

1) Binary: and, or

2) 부정: !, not

6. 비교 연산

1) >, <, >=, <=

2) 균등 연산: ==, !=

문자열

th: 를 사용하는 태그들은 보통의 경우 다음과 같이 HTML 태그와 거의 동일한 형식으로 사용하면 된다.

<input type="check" th:id="'check'+${info.seq}" th:value='${info.name}' th:text='${info.name}'></input>

또한 HTML 태그 내부에 들어가는 텍스트를 설정하려면 위 코드와 같이 th:text를 사용하거나, 혹은 [[${ }]]와 같은 inLine을 활용하여 표시할 수 있다.

반복문

<th:each> 를 사용하여 다음과 같이 반복문을 구현할 수 있다.

table>
  <tr>
    <th>NAME</th>
    <th>PRICE</th>
    <th>IN STOCK</th>
  </tr>
  <tr th:each="prod : ${prods}">
    <td th:text="${prod.name}">Onions</td>
    <td th:text="${prod.price}">2.41</td>
    <td th:text="${prod.inStock}? #{true} : #{false}">yes</td>
  </tr>
</table>

반복문을 사용할 때, Thymeleaf는 Iteration 을 추적할 수 있도록 다음과 같이 status 문법을 제공한다.

<table>
  <tr>
    <th>NAME</th>
    <th>PRICE</th>
    <th>IN STOCK</th>
  </tr>
  <tr th:each="prod,iterStat : ${prods}" th:class="${iterStat.odd}? 'odd'">
    <td th:text="${prod.name}">Onions</td>
    <td th:text="${prod.price}">2.41</td>
    <td th:text="${prod.inStock}? #{true} : #{false}">yes</td>
  </tr>
</table>

iterStat.index = 0 부터 시작하는 인덱싱

iterStat.count = 1 부터 시작하는 인덱싱

iterStat.size = 전체 elements의 갯수

iterStat.first/last = 첫/마지막 인덱스

iterStat.odd/even = 홀/짝수 인덱스

조건문

조건문은 th:if/th:unless 혹은 th:switch/th:case를 이용하여 나타낼 수 있다.

◎th:if/th:unless

<div th:if="${data.type == '01'}">
  타입이 01일때 태그 노출
</div>
<div th:unless="${data.type == '01'}">
  타입이 01이 아닐때 태그 노출
</div>

◎th:switch/th:case

<th:block th:switch="${type}">
    <em th:case="01">01</em>
    <em th:case="02">02</em>
    <em th:case="*">그 외 (생략가능)</em>
</th:block>

혹은 다음과 같이 ? 를 사용하여 표현할 수도 있다.

[[th:text = "titNm = ${data.tabType == '01' ? '첫번째탭' : '두번째탭'}"]]

링크 적용

th:href를 이용해서 링크를 적용할 수 있다.

<ul>
  <li th:each="dto: ${list}">
    <a th:href = "@{/sample/exView}">
      [[${dto}]]
    </a>
  </li>
</ul>

혹은 다음과 같이 파라미터를 추가로 보내줄 수 있다.

파라미터 추가
<ul>
  <li th:each="dto: ${list}">
    <a th:href = "@{/sample/exView(sno=${dto.sno})}">
      [[${dto}]]
    </a>
  </li>
</ul>

문자/날짜 포맷

Thymeleaf 내장 메서드를 사용하여 문자열의 포맷이나 날짜 포맷을 제어할 수 있다.

sno를 모두 5자리 형식으로
<ul>
  <li th:each="dto: ${list}">
  	[[${#numbers.formatInteger(dto.sno, 5)}]]
  </li>
</ul>

<hr/>

날짜 출력 형식을 시간을 제외하고 날짜만
<ul>
  <li th:each="dto: ${list}">
  	[[${dto.sno}]] -- [[${#temporals.format(dto.regTime, 'yyyy/MM/dd')}]]
  </li>
</ul>

클래스 동적 추가

th:classappend를 이용하여 동적으로 클래스를 추가할 수도 있다.

<div th:with="testClass = ${code == '01' ? : 'active' : ''}">
    <li class="comm" th:classappend="${testClass}"> 코드가 01일때만 클래스 추가 </li>
</div>

'[JAVA] > Spring-Boot' 카테고리의 다른 글

[Spring-Boot] QueryDSL: JPA 동적 쿼리 사용 (0)	2021.07.15
[Spring-Boot] Thymeleaf 3: 페이지 삽입 (0)	2021.07.09
[Spring-Boot] Thymeleaf 1: 시작하기 (0)	2021.07.08
[Spring-Boot] Spring Data JPA 3: @Query (0)	2021.07.08
[Spring-Boot] Spring Data JPA 2: 쿼리 메서드 (0)	2021.07.08