1. Thymeleaf란?
Thymeleaf는 비교적 최근에 만들어진 템플릿 엔진이자, 서버사이드 자바 템플릿의 한 종류입니다.
템플릿 엔진이란 동적 컨텐츠를 생성하는 방법입니다. 템플릿 양식과 특정 데이터 모델에 따른 입력 자료를 결합하여 결과 문서를 출력하는 소프트웨어를 말하며 view code(html)와 data logic code(DB connection)를 분리해주는 기능을 합니다.
스프링 MVC에서 주로 동적인 view를 만드는데 사용합니다. 그렇다고 view만 만드는 데 사용하지는 않으며 다양한 용도로 사용이 가능합니다.
템플릿 엔진에는 서버사이드, 클라이언트 사이드 이렇게 두 가지가 있습니다.
서버사이드 템플릿 엔진
- 서버에서 가져온 데이터를 미리 정의된 템플릿에 넣어 html을 그린 뒤 클라이언트에게 전달해준다.
- html코드에서 고정적으로 사용되는 부분은 템플릿으로 만들어두고, 동적으로 생성되는 부분만 템플릿에 소스코드를 끼워 넣는 방식으로 동작한다.
클라이언트 템플릿 엔진
- html형태로 코드를 작성하며, 동적으로 DOM을 그리게 해주는 역할을 해준다.
- 데이터를 받아서 DOM 객체에 동적으로 그려주는 프로세스를 담당한다.
스프링부트가 자동 설정을 지원하는 템플릿 엔진
- FreeMarker, Groovy, Thymeleaf, Mustache
JSP와 다르게 Servlet Code로 변환되지 않습니다. 따라서 비즈니스 로직과 분리되어 오로지 view에 집중할 수 있습니다.
2. Thymeleaf 사용 하기
1. 의존성 추가
- pom.xml에 아래 코드를 추가합니다.
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
2. th 네임스페이스 추가
- Thymeleaf를 사용하기 위해 아래와 같이 xmlns:th="http://www.thymeleaf.org" 을 추가합니다.
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>Hello</h1>
</body>
</html>
3. 파일 경로 설정
- src/main/resources/templates 안에 html 파일을 생성합니다.
3. Thymeleaf 문법
1. 간단 요약
간단한 표현
| 변수 표현식 | ${...} |
| 선택 변수 표현식 | *{...} |
| 메세지 표현식 | #{...} |
| 링크 URL 표현식 | @{...} |
| 단편 표현식 | ~{...} |
문자 연산
| 문자합치기 | + |
| 리터럴 대체 | | |
산술 연산
| Binary operators | +, -, *, /, % |
| Minus sign(unary operator) | - |
Boolean 연산
| Binary operators | and, or |
| Boolean negation(unary operator) | !, not |
비교와 동등
| 비교 | >, <, >=, <= (gt, lt, ge, le) |
| 동등 | ==, != (eq, ne) |
조건 연산
| if-then | (if) ? (then) |
| if-then-else | (if) ? (then) : (else) |
| Default | (value) ?: (defaultvalue) |
2. 텍스트
- 서버에서 Model에 담아준 각종 속성(Attribute)들을 서버사이드 템플릿 엔진인 Thymeleaf에서는 여러 방법으로 표현이 가능
- text, utext의 형태로 사용이 가능
- [[...]], [(...)] 도 동일
/* Java */
String message = "<p>Hello World!</p>";
model.addAttribute("message", message);
//표현 방법
<span th:text=${message}></span>
<span>[[message]]</span>
<span th:utext=${message}></span>
<span>[(message)]</span>
//1. th:text, [[...]] 일 경우
<span><p>Hello World!</p></span>
//2. th:utext, [(...)] 일 경우
<span>Hello World!</span>
3. 변수
- 기본적으로 변수 표현식은 ${...} 의 형태로 사용하며, 단순히 값을 표현합니다.
- 이 변수 표현식에는 SpringEL 이라는 스프링이 제공하는 표현식을 사용할 수 있습니다.
SpringEL 표현식
- 단순한 변수라면 ${data}로 바로 표현이 가능하지만, Object나 List 같은 객체는 아래와 같이 사용할 수 있습니다.
Object
- data.field : data의 field 프로퍼티 접근(data.getField)
- data['field'] : 위와 같음(data.getField)
- data.getField() : data의 getField() 메서드를 직접 호출할 수 있음
List
- list[0].field : list의 첫 번째 데이터에서 field 프로퍼티에 접근
- list[0]['field'] : 위와 같음
- list[0].getField() : list의 첫 번째 데이터를 찾아 메서드를 직접 호출
- list.get(0).xxx : list의 get메서드를 통해 데이터를 찾아 프로퍼티 접근 가능
Map
- map['key'].field : map에서 key를 찾아 field 프로퍼티에 접근, map.get('key').getField()와 동일
- map['key']['field'] : 위와 같음
- map['key'].getField() : map에서 key를 찾아 직접 메서드를 호출
지역 변수 선언
- th:with 를 이용하여 선언한 태그 안에서만 사용할 수 있습니다.
<div th:with="item=${list[0]}">
<ul>
<li>name : <span th:text="${item.name}"></span></li>
<li>age : [[${item.age}]]</li>
</ul>
</div>
4. 기본 객체
- Thymeleaf는 아래와 같은 기본 객체들을 사용할 수 있게 제공합니다.
- ${param.paramData}의 형태로 사용합니다.
- ${#request}
- ${#response}
- ${#session}
- ${#servletContext}
- ${#locale}
if([[${session.DEVICE_TYPE}]] == 'AOS' || [[${session.DEVICE_TYPE}]] == 'IOS'){
isApp = 'Y';
}
5. 유틸리티 객체와 날짜
- Thymeleaf는 아래와 같이 편의성 유틸리티 객체를 제공합니다.
- #message : 메시지, 국제화 처리
- #dates : java.util.Date 서식 지원
- #calendars : java.util.Calendar 서식 지원
- #numbers : 숫자 서식 지원
- #strings : 문자 관련 편의 기능
- #objects : 객체 관련 기능 제공
- #uris : URI 이스케이프 지원
- #arrays : 배열 관련 기능 제공
- #lists, #sets, #maps : 컬렉션 관련 기능
- #ids : 아이디 처리 관련 기능 제공
- #bools : boolean 관련 기능
//# dates
<span data-th-text="${#dates.format(#dates.createNow(), 'yyyy-MM-dd HH:mm:ss')}"></span>
//#strings
<th:block data-th-if="${#strings.equals(userName, name1)}"></th:block>
6. URL 링크
- Thymeleaf 에서는 URL을 생성할 때 @{...} 문법을 사용합니다.
//단순한 URL 표현
@{/hello}
//-> /hello
//쿼리 파라미터를 포함한 URL 표현
@{/hello(param1=${param1}, param2=${param2})}
//-> /hello?param1=data1¶m2=data2
//경로변수
@{/hello/{param1}/{param2}(param1=${param1}, param2=${param2})}
//-> /hello/data1/data2
//-> URL경로상 변수가 있으면 ()는 경로 변수로 처리된다.
//경로 변수 + 쿼리 파라미터
@{/hello/{param1}(param1=${param1}, param2=${param2})}
//-> /hello/data1?param2=data2
//-> 경로 변수와 쿼리 파라미터를 함께 사용할 수 있다.
7. if, else 구문
<th:block data-th-if="${test == null}"></th:block>
<th:block data-th-unless="${test == null}"></th:block>
8. and, or 구문
<th:block data-th-if="${name == null and name == ''}">
<th:block data-th-if="${name != '손흥민' or name != '흥민'}">
9. 반복문
<!-- java -->
model.addAttribute("playerList", list);
<tr th:each="player : ${playerList}">
<td th:text="${player.number}">10</td>
<td th:text="${player.name}">kane</td>
<td th:text="${player.goal}">100</td>
<td th:text="${player.assist}">59</td>
</tr>
10. switch ~ case 문
// th:switch="${조건대상 변수}"
// <span th:case="비교변수">value</span>
<th:block th:switch="${username}">
<span th:case="dier">dier 선수</span>
<span th:case="kane">kane 선수</span>
</th:block>
11. 문자열 비교
<th:block data-th-if="${#strings.equals(userName, name1)}"></th:block>
12. 문자열 합치기
<span data-th-text="|${username}님이 로그인하였습니다.|"></span>
13. 비어있는지 확인
${#strings.isEmpty(title)}
${#strings.arrayIsEmpty(array)}
${#strings.listIsEmpty(list)}
${#strings.setIsEmpty(set)}
14. 동적으로 클래스 추가
<div data-th-each="i : ${#numbers.sequence(0,1)}" data-th-if="${i < #lists.size(LIST)}" data-th-classappend="${i == 0} ? 'active':''">
</div>반응형
댓글