1. Thymeleaf란?
- Thymeleaf는 자바 웹 애플리케이션에서 템플릿을 처리하는 엔진으로, 서버 측에서 HTML 페이지를 동적으로 생성하기 위한 도구이다.
- 템플릿을 사용하여 HTML 코드와 데이터를 결합하여 동적인 콘텐츠를 생성할 수 있으며, HTML 파일 자체가 브라우저에서 바로 볼 수 있도록 설계되었다.
- *.html 파일을 브라우저에서 열 때는 정적 페이지로 보이고, 서버에서 렌더링할 때는 동적인 데이터를 포함하도록 변환된다.
2. Thymeleaf의 주요 특징
2-1. 자연 템플릿(Natural Templates):
- Thymeleaf 템플릿은 브라우저에서 볼 수 있는 정적 HTML로 유지된다. 즉, Thymeleaf로 작성된 HTML 파일은 템플릿 엔진 없이도 정적 HTML로서 브라우저에서 바로 열어볼 수 있어 디자이너와 개발자 간의 협업이 용이하다.
2-2. 서버 사이드 및 클라이언트 사이드 렌더링:
- Thymeleaf는 서버 사이드 템플릿 엔진으로 주로 사용되지만, 일부 클라이언트 측에서 렌더링을 지원하기도 한다.
- 서버에서 데이터를 받아 HTML을 동적으로 생성하고, 사용자에게 동적인 콘텐츠를 제공하는 역할을 한다.
2-3. Spring MVC와의 긴밀한 통합:
- Thymeleaf는 Spring Boot와 Spring MVC에서 기본 템플릿 엔진으로 널리 사용된다.
- @Controller에서 모델 데이터를 전달받아 뷰에서 동적으로 표시하는 데 사용되며, Model 객체와 함께 데이터를 쉽게 템플릿에 전달할 수 있다.
2-4. 표현식 및 속성 기반 데이터 바인딩:
-
Thymeleaf는 다양한 표현식을 통해 데이터 바인딩을 지원한다. 이를 통해 컨트롤러에서 전달된 데이터를 HTML 태그에 쉽게 삽입할 수 있다.
-
주요 표현식:
- ${}: 변수를 참조하는 기본 표현식이다.
- th:text: 요소의 텍스트 내용을 동적으로 설정한다.
- th:if, th:each: 조건문 및 반복문을 사용하여 동적 콘텐츠 생성이 가능하다.
<!-- @Controller 에서 "data"라는 모델 데이터를 전달받았을 때-->
<h1>컨텐츠에 데이터 출력하기</h1>
<ul>
<li>th:text 사용 -> <span th:text="${data}"></span></li>
<li>컨텐츠 안에서 직접 출력하기 = [[${data}]]</li>
</ul>2-5. 국제화(I18n) 지원:
- Thymeleaf는 국제화(i18n)를 지원하여 다국어 웹 애플리케이션을 쉽게 구현할 수 있다. 메시지 파일을 통해 다양한 언어에 맞춘 텍스트를 뷰에 출력할 수 있다.
3. Thymeleaf 활용
3-1. 연산
- 비교연산
> (gt), < (lt), >= (ge), <= (le), ! (not), == (eq), != (neq,ne)- 나머지 연산은 기존과 같음
<!-- @Controller 에서 "data", "nullData"라는 모델 데이터를 전달받았을 때-->
<h1>연산</h1>
<ul>
<li> 산술 연산
<ul>
<li> 10 + 2 = <span th:text="10 + 2"></span></li>
<li> 10 % 2 == 0 = <span th:text="10 % 2 == 0"></span></li>
</ul>
</li>
<li> 비교 연산
<ul>
<li> 10 > 2 = <span th:text="10 > 2"></span></li>
<li> 10 <= 2 = <span th:text="10 le 2"></span></li>
<li> 10 != 2 = <span th:text="10 neq 2"></span></li>
</ul>
</li>
<li> 조건식
<ul>
<li> (10 % 2 == 0)? '짝수' : '홀수' = <span th:text="(10 % 2 == 0)? '짝수' : '홀수'"></span></li>
</ul>
</li>
<li> Elvis 연산자
<!-- 조건식의 축약 버전 -->
<ul>
<li> ${data} ?: '데이터가 없습니다.' = <span th:text="${data} ?: '데이터가 없습니다.'"></span></li>
<li> ${nullData} ?: '데이터가 없습니다.' = <span th:text="${nullData} ?: '데이터가 없습니다.'"></span></li>
</ul>
<ul>
<li> ${data} ?: _ = <span th:text="${data} ?: _">데이터가 없습니다.</span></li>
<li> ${nullData} ?: _ = <span th:text="${nullData} ?: _">데이터가 없습니다.</span></li>
</ul>
</li>
</ul>3-2. 반복 상태 유지
- 반복의 두번째 파라미터를 설정해서 반복의 상태를 확인할 수 있다.
- 두번째 파라미터는 생략 가능한데, 생략하면 지정한 변수명(user) + Stat가 된다.
- 현재 코드 기준 user + Stat = userStat이므로 생략가능.
<!-- @Controller 에서 "users"라는 list 타입의 모델 데이터를 전달받았을 때-->
<h1>반복 상태 유지</h1>
<table border="2">
<tr>
<th>count</th>
<th>username</th>
<th>age</th>
<th>etc</th>
</tr>
<tr th:each="user, userStat : ${users}">
<td th:text="${userStat.count}"></td>
<td th:text="${user.username}"></td>
<td th:text="${user.age}"></td>
<td>
index = <span th:text="${userStat.index}"></span>,
size = <span th:text="${userStat.size}"></span>,
even = <span th:text="${userStat.even}"></span>,
odd = <span th:text="${userStat.odd}"></span>,
last = <span th:text="${userStat.last}"></span>,
first = <span th:text="${userStat.first}"></span>,
current = <span th:text="${userStat.current}"></span>
</td>
</tr>
</table>3-3. 블록
- <th:block> 은 HTML 태그가 아닌 타임리프의 유일한 자체 태그이다.
- 템플릿 로직을 그룹화하거나 조건문, 반복문을 처리할 때 사용되는 Thymeleaf 태그이다.
- 렌더링되지 않는 블록 태그로, HTML로 변환될 때는 존재하지 않는다. 이를 통해 불필요한 HTML 태그 없이 로직을 깔끔하게 처리할 수 있다.
- 사용 빈도는 높지는 않고 어쩔 수 없이 사용될 때 사용한다.
<th:block th:each="user : ${users}">
<div>
사용자 이름1
<span th:text="${user.username}"></span>
사용자 나이1
<span th:text="${user.age}"></span>
</div>
<div>
요약 <span th:text="${user.username} + '/' + ${user.age}"></span>
</div>
</th:block>3-4. URL 동적 표현식
- @{} 표현식: Thymeleaf에서 URL을 동적으로 구성하는 방법이며, 서버 측 경로와 쿼리 파라미터를 동적으로 생성할 수 있다.
- 쿼리 파라미터: @{/hello(param1=${param1}, param2=${param2})}와 같은 방식으로 쿼리 파라미터를 동적으로 생성하여 URL에 추가할 수 있다.
- 모델 데이터와의 연결: ${param1}과 같은 표현식은 서버에서 전달된 데이터를 참조하여 URL을 동적으로 구성한다.
<!-- 각 URL부분과 그 링크 경로 -->
<h1>URL 동적 표현식</h1>
<ul>
<li><a th:href="@{/hello}">basic url</a></li>
<!-- http://localhost:9090/hello -->
<li><a th:href="@{/hello(param1=${param1}, param2=${param2})}">query param</a></li>
<!-- http://localhost:9090/hello?param1=data1¶m2=data2 -->
<li><a th:href="@{/hello/{param1}/{param2}(param1=${param1}, param2=${param2})}">path variable</a></li>
<!-- http://localhost:9090/hello/data1/data2 -->
<li><a th:href="@{/hello/{param1}(param1=${param1}, param2=${param2})}">path variable + query param</a></li>
<!-- http://localhost:9090/hello/data1?param2=data2 -->
</ul>