[Thymeleaf] 주요 기능 정리

그동안 뷰 템플릿으로 jsp만 사용했었는데 스프링부트를 학습하며 Thymeleaf의 존재를 알게 되었다. 스프링부트는 JSP를 지양하고 다양한 뷰 템플릿 중 Thymeleaf의 사용을 지향한다고 한다. 그렇기에 Thymeleaf를 사용하면 스프링과 자연스럽게 통합될 수 있다. Thymeleaf의 주요 기능중 출력 부분에 대해 학습한 내용을 정리하며 다시 한번 복습하자!

주요 특징

타임리프는 기본적으로 HTML 태그의 속성에 기능을 정의해서 동작한다. JSP의 경우 서버를 통해 랜더링 작업을 거치고

정상적인 결과를 볼 수 있지만 타임리프로 작성된 파일은 그대로 열어도 HTML 결과를 확인할 수 있다. 타임리프 소스가 적용된

동적인 부분은 확인하지 못하겠지만 HTML 마크업 결과가 어떻게 되는지 확인 할 수 있다.

Project Metadata

Project: Gradle Project
Language: Java 11
Framework : Spring Boot: 2.5.x

Dependencies - build.gradle

dependencies {
	// 타임리프 사용을 위한 의존성 추가
	implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
}

타임리프는 html파일에 하단의 사용 선언으로 시작한다.

<html xmls:th="http://www.thymeleaf.org">

</html>

텍스트 출력

<!-- th:text속성 사용-->
<p th:text="${data}">empty</p>

<!-- 태그안에 직접 출력하는 경우 -->
<p>[[${data}]]</p>

data가 null이라면 태그에 입력한 "empty"가 출력된다.

Escape

데이터에 <, > 같은 특수문자가 있다면 웹브라우저는 HTML 태그의 시작으로 인식한다. 그렇기에 원하는 대로 출력할 수 없다.

이런 특수문자를 문자로 인식하도록 변경해줘야하는데 이것을 HTML 엔티티 라고 하며 특수문자를 HTML 엔티티로 변경하는 것을 Escape라 한다. 타임리프의 th:text , [[...]] 는 기본적으로 이스케이스(escape)를 제공한다.

Unescape

Escape의 반대 즉 특수문자를 HTML 태그로 인식하게 출력하려면 어떻게 해야 할까

타임리프는 th:utext , [(...)] 의 기능을 추가한다.

<p>th:text = <span th:text="${data}"></span></p>
<p>th:utext = <span th:utext="${data}"></span></p>

<p>[[${data}]]</p>
<p>[(${data})]</p>

unescape가 적용되어 HTML태그로 인식된 부분은 Bold가 들어간 걸 확인할 수 있다.

내용에 태그가 포함되면 의도치 않은 문제가 발생할 수 있기 때문에 항상 escape를 기본으로 해야한다.

SpringEL

JSP에서도 사용했었던 SpringEL은 타임리프에서도 사용할 수 있다.

<!-- Object -->
<span th:text="${user.username}"></span>
<span th:text="${user['username']}"></span>
<span th:text="${user.getUsername()}"></span>

<!-- List -->
<span th:text="${users[0].username}"></span>

<!-- Map -->
<span th:text="${userMap['userA'].username}"></span>
<span th:text="${userMap['userA']['username']}"></span>

Object

"user"라는 key에 객체에 전달된 경우

${user.필드명}
${user['필드명']}
${user.getter}

으로 데이터에 접근이 가능하다. 물론 모두 Getter로 데이터를 가져오는다는 점이 동일하다.

List

user객체가 담긴 List가 전달된 경우

${users[index].필드명}

Object에서의 접근법에서 인덱스만 추가된 형태로 접근이 가능하다.

Map

user객체가 포함된 Map이 전달된 경우

${userMap['user'].필드명}
${userMap['user'].['필드명']}

으로 접근이 가능하다.

지역변수 선언

지역변수를 선언하여 필요한 곳에서 사용할 수 있다.

타임리프는 th:with 기능으로 지역변수 선언을 제공한다.

<div th:with="user=${users[0]}">
	<span th:text="${user.username}"></span>
</div>

th:with가 선언된 태그 안에서만 사용이 가능하다.

학습저장소

[Thymeleaf] 주요 기능 정리 - 출력