Thymeleaf란?
템플릿 엔진으로 html 태그에 속성을 추가하여 동적으로 값을 추가하거나 처리할 수 있다.
특징
- 서버사이드 HTML 랜더링 (SSR)
타임리프는 서버에서 HTML을 동적으로 랜더링하는데 사용된다. - 네츄럴 템플릿
순수 HTML을 유지하면서 뷰 템플릿도 사용할 수 있다. 굳이 서버의 랜더링 과정으로 HTML 응답을 받지 않고 웹 브라우저에서 소스코드를 열어도 정적인 정상 HTML 결과를 확인할 수 있다. 물론 서버의 랜더링 과정이 없었기에 동적인 데이터 처리는 기대할 수 없다. JSP와 같은 뷰 템플릿에서는 이런 네츄럴 템플릿 특성이 없다. - 스프링 통합 지원
타임리프는 스프링과 자연스럽게 통합되고, 스프링의 다양한 기능을 편리하게 사용할 수 있다.
사용하려면?
프로젝트 생성시 dependency에서 thymeleaf를 추가해주어야 한다.
이후 html 파일에서 다음과 같이 선언해준다.
<html xmlns:th="http://www.thymeleaf.org">
텍스트 - text, utext
타임리프는 기본적으로 HTML 태그의 속성에 기능을 정의해서 동작한다. HTML 콘텐츠(content)에 데이터를 출력할 때 th:text를 사용하면 된다.
<span th:text="${모델변수}"></span>
태그 속성을 통해서가 아니라 HTML 콘텐츠 영역 안에서 직접 출력하고 싶다면 [[${}]]를 사용하면 된다.
[[${모델변수}]]
그런데 기본적으로 thymeleaf에서는 escape를 제공한다. HTML 문서는 <, >같은 특수 문자를 기반으로 정의되므로 데이터에 특수 문자를 사용하면 그대로 출력하도록 지원한다. 만약 데이터에 HTML 속성을 부여하고 싶다면 unescape를 지원하는 utext를 사용해야 한다.
<span th:utext="${모델변수}"></span>
[(${모델변수})]
실제 서비스를 개발하다 보면 escape를 사용하지 않아서 HTML이 정상 렌더링 되지 않는 수 많은 문제가
발생한다. escape를 기본으로 하고, 꼭 필요한 때만 unescape를 사용하자.
HTML 엔티티에 대해 추후에 더 알아보도록 하자.
변수 - SpringEL
변수 표현식
${...}
앞에서 봤듯이 변수를 표현하는 문법은 위와 같다.
-
Object
user.username : user의 username을 프로퍼티 접근 -> user.getUsername()
user['username'] : 위와 같음 -> user.getUsername()
user.getUsername() : user의 getUsername() 을 직접 호출 -
List
users[0].username : List에서 첫 번째 회원을 찾고 username 프로퍼티 접근 -> list.get(0).getUsername()
users[0]['username'] : 위와 같음
users[0].getUsername() : List에서 첫 번째 회원을 찾고 메서드 직접 호출 -
Map
userMap['userA'].username :Map에서 userA를 찾고, username 프로퍼티 접근 -> map.get("userA").getUsername()
userMap['userA']['username'] : 위와 같음
userMap['userA'].getUsername() : Map에서 userA를 찾고 메서드 직접 호출
지역 변수 선언은 th:with를 사용하면 된다.
<div th:with="first=${users[0]}"> <p>처음 사람의 이름은 <span th:text="${first.username}"></span></p> </div>
여기서 first가 지역 변수인데 주의할 점은 선언한 태그 안에서만 유효하다느 점이다.
기본 객체들
타임리프는 기본 객체들을 제공한다.
${#request} - 스프링 부트 3.0부터 제공하지 않는다.
${#response} - 스프링 부트 3.0부터 제공하지 않는다.
${#session} - 스프링 부트 3.0부터 제공하지 않는다.
${#servletContext} - 스프링 부트 3.0부터 제공하지 않는다.
${#locale}
유틸리티 객체와 날짜
타임리프는 문자, 숫자, 날짜, URI등을 편리하게 다루는 다양한 유틸리티 객체들을 제공한다.
타임리프 유틸리티 객체들
- #message : 메시지, 국제화 처리
- #uris : URI 이스케이프 지원
- #dates : java.util.Date 서식 지원
- #calendars : java.util.Calendar 서식 지원
- #temporals : 자바8 날짜 서식 지원
- #numbers : 숫자 서식 지원
- #strings : 문자 관련 편의 기능
- #objects : 객체 관련 기능 제공
- #bools : boolean 관련 기능 제공
- #arrays : 배열 관련 기능 제공
- #lists , #sets , #maps : 컬렉션 관련 기능 제공
- #ids : 아이디 처리 관련 기능 제공, 뒤에서 설명
타임리프 유틸리티 객체
https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#expression-utilityobjects
유틸리티 객체 예시
https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#appendix-b-expressionutility-objects
URL 링크
타임리프에서 URL 링크를 생성할 때는 @{...}을 사용한다
@{/경로변수}
쿼리 파람을 넣고 싶을 때
@{/경로변수(param1=${param1})
경로 변수를 추가할 때
@{/경로변수/{param2}(param2=${param2})}
두 가지를 혼합해서 사용할 수도 있다.
@{/경로변수/{param2}(param2=${param2}, param1=${param1})}
결과값 : /경로변수/param2?param1=모델변수
리터럴
리터럴은 소스 코드상에 고정된 값을 말하는 용어이다.
예를 들어서 다음 코드에서 "Hello" 는 문자 리터럴, 10 , 20 은 숫자 리터럴이다.
기본적으로 띄어쓰기가 없는 문자열은 하나의 토큰으로 취급해주지만 ' '작은 따옴표로 감싸주어 표현하는 것이 안전하다. 즉 중간에 띄어쓰기가 있다면 오류가 난다.
th:text="'Hello'"- (o)
th:text="'Hello World!'"- (o)
th:text="Hello World!"- (x) 오류
th:text="'hello' + ' world!'"- (o)
th:text="'hello ' + ${data}"- (o)
th:text="|hello ${data}|"- (o)
마지막에 사용한 것은 리터럴 대체 문법인데 변수와 섞어 사용할 때 중간마다 ' ', +로 구분할 일이 없어서 간편하게 사용할 수 있는 장점이 있다.
