JSP를 사용하여 웹 개발을 한다면, JSP 소스코드와 html이 혼재되어 있어 파일을 웹 브라우저에서 열게 되면 정상적인 확인이 어렵다. 서버를 통해 열어야 정상적으로 확인할 수 있는데, 순수 html을 유지하면서 뷰 템플릿도 사용할 수 있는 Thymeleaf를 통해 이 문제를 해결할 수 있다. 물론 웹 브라우저에서 바로 열게 되면 html 마크업 언어가 어떻게 되는지 확인할 수 있지만 동적인 결과 렌더링은 되지 않는다.
타임리프는 Spring Boot에서 공식적으로 지원하는 뷰 템플릿 엔진이다. JSP나 Freemaker와 같이 서버에서 db 혹은 api에서 가져온 데이터를 동적으로 생성하여 클라이언트에게 응답할 브라우저 화면을 만들어주는 역할을 한다. 타임리프는 JSP와 달리 html 확장자를 가지고 있으며, 백엔드 서버에서 html을 동적으로 렌더링한다. → 서버 사이드 렌더링
다음과 같은 특징으로 Spring Boot와 타임리프를 함께 사용하는 것을 권장하고 있다. Dependency를 추가하는 간단한 작업으로 타임리프를 사용할 수 있다.
타임리프를 사용하려면 maven의 경우 pom.xml에, gradle의 경우 build.gradle에 다음 코드를 추가한다.
//maven의 경우
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
//gradle의 경우
dependencies {
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
}
그리고 타임리프를 적용할 문서 최상단에 네임스페이스를 추가한다.
<html xmlns:th="<http://www.thymeleaf.org>">
태그 속성 변경 th
th 문법을 통해 태그 안의 값을 서버에서 전달받은 값으로 대체한다.
파일을 직접 열어 html을 확인할 때는 기존 href 속성이 보여지고, 뷰 템플릿을 거치면 th:xxx 의 값으로 대체되면서 동적으로 변경된다.
<h2 th:text=”hello”>hi</h2>
“hi”가 “hello” 문자로 변경되어 나타난다.
변수 접근 ${...}
모델에 포함된 값이나 타임리프 변수로 선언한 값을 조회할 수 있다. 이때 프로퍼티 접근법을 사용한다.
controller에서 전달한 item의 이름을 조회할 때 { item.getName() } 와 같이 사용한다.
반복 출력 th:each
모델에 포함된 컬렉션 데이터를 하나씩 변수에 담아 반복문을 돌릴 때 사용한다. 컬렉션의 수 만큼 반복한다.
<tr th:each="item : ${items}">
<td th:text=${item.name}>상품명</td>
<td th:text=${item.price}>상품가격</td>
<tr>
리터럴 대체 |…|
타임리프에서 문자와 표현식 등은 분리되어 있어서 더해서 사용해야 하는데, 리터럴 대체 문법으로 더하기 연산 없이 간단히 나타낼 수 있다.
<!-- 사용 전 -->
<span th:text="'My name is ' + ${user.name} + ' !'"></span>
<!-- 사용 후 -->
<span th:text="|My name is ${user.name} !|"></span>
url 링크 표현식 @{path}
이동하고자 하는 URL 링크를 path에 적어준다. URL 링크 표현식을 사용하면 서블릿 컨텍스트를 자동으로 포함한다.
<a th:href="@{/items/{itemId}(itemId=${item.id}, query='test')}">상품이동</a>
다음과 같이 query 파라미터도 생성할 수 있다. 이 경우 url은 http://localhost:8080/items/1?query=test 이다.
이외에도 다양한 타임리프 문법들을 공식 사이트에서 확인할 수 있다.