Thymeleaf
- JSP와 유사하게
${}을 별도의 처리 없이 이용할 수 있다. - Model에 담긴 객체를 화면에서 JavaScript로 처리하기 편하다.
- 연산이나 포맷과 관련된 기능을 추가적인 개발 없이 지원한다.
- 개발 도구를 이용할 때
.html파일로 생성하는 데 문제가 없고 별도의 확장자를 이용하지 않는다.
Thymeleaf를 사용하는 프로젝트 생성
프로젝트 변경 후에 만들어진 결과를 보관(캐싱)하지 않도록 설정해 두는 것이 편리하다. 이를 위해 프로젝트 생성 시 application.properties 파일에 다음과 같은 항목을 추가한다.
spring.thymeleaf.cache=falseController 작성
package org.zerock.ex3.controller;
import lombok.extern.log4j.Log4j2;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.Getmapping;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
@RequestMapping("/sample")
@Log4j2
public class SampleController {
@GetMapping("/ex1")
public void ex1() {
log.info("ex1...............");
}
}@Log4j2: Lombok의 기능으로 스프링 부트가 로그 라이브러리 중에Log4j2를 기본으로 사용하고 있기 때문에 별도의 설정 없이 적용 가능
html 작성
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head><html>태그 내에 xmlns 속성에 thymeleaf와 관련된 속성값이 지정되어 있다.
Thymeleaf의 기본 사용법
반복문 처리
반복문은 th:each라는 속성을 이용한다. th:each = "변수: ${목록}" 형식으로 사용하면 된다.
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<!-- 여기가 반복문을 사용한 구간 -->
<li th:each="dto : ${list}">
[[${dto}]]
</li>
</ul>
</body>
</html><li>태그 내에는dto라는 변수를 만들어서 사용하고 Model로 전달된 데이터는${list}를 이요해서 처리하고 있다.<li>태그의 안쪽에 사용된[[]]는 인라인 표현식으로, 별도의 태그 속성으로 지정하지 않고 사용하고자 할 때 유용하게 쓸 수 있다.
반복문의 상태(state) 객체
반복문에는 부가적으로 사용할 수 있는 상태 객체라는 것이 있다. 상태 객체를 이용하면 순번이나 인덱스 번호, 홀수/짝수 등을 지정할 수 있다.
<ul>
<li th:each="dto, stat : ${list}">
[[${state.index]] --- [[${dto}]]
</li>
</ul>state 변수의 이름은 다른 이름을 이용하는 것도 가능하다. 상태 객체에서는 크게 두 가지 속성을 이용할 수 있다.
- index : 0부터 시작
- count : 1부터 시작
제어문 처리
Thymeleaf의 제어문 처리는 th:if ~ unless 등을 이용할 수도 있고, 삼항연산자 스타일을 사용할 수 있다. 예를 들어 sno의 값이 5의 배수들만 출력하라는 지시가 있다면 다음과 같은 형태로 사용할 수 있다.
<ul>
<li th:each="dto, state : ${list}" th:if="${dto.sno % 5 == 0}">
[[${dto}]]
</li>
</ul>th:if와 th:unless를 이용한다면 상황에 맞게 다른 내용을 출력하는 것이 가능하다.
- 다른 언어들은
if ~ else가 하나의 묶음으로 처리되지만 Thymeleaf는 단독으로 처리한다는 차이가 있다.
Thymeleaf의 th:if를 이용하는 방식이 번거롭다면 삼항연산자 방식을 이용하면 된다.
<ul>
<li th:each="dto, state : ${list}" th:text="${dto.sno % 5 == 0} ? ${dto.sno}">
</li>
</ul>💡 inline 속성
Thymeleaf는 기본적으로 HTML에 맞춰 렌더링 하는 게 기본 값이다. (평소 태그들은<th:inline="html">이라고 생각하면 쉽다.)
그래서 이후<script></script>태그가 나오면 그 안에 있는 thymeleaf 문을 제대로 해석하지 못한다. 이를 방지하기 위해<script th:inline=javascript>로 선언해주는 것이다.
즉, inline은 해당 블럭을 어떤 언어로 읽어야 하는지 지정해주는 속성이다.
링크 처리
Thymeleaf의 링크는 @{}를 이용해서 사용한다. 특별하게 다른 점이라고 할 수는 없지만, 파라미터를 전달해야 하는 상황에서는 좀 더 가독성 좋은 코드를 만들 수 있다. 예를 들어보자.
<li th:each="dto : ${list}" >
<a th:href="@{/sample/exView}">[[${dto}]]</a>
</li>Thymeleaf의 기본객체와 LocalDateTime
Thymeleaf에는 내부적으로 여러 종류의 기본 객체라는 것을 지원한다. 기본 객체는 문자나 숫자, 웹에서 사용되는 파라미터, request, response, session 등 다양한데 개발자는 이를 이용해서 좀 더 편리한 코드를 작성할 수 있다.
<ul>
<li th:each="dto : ${list}" >
[[${dto.sno}]] --- [[${#temporals.format(dto.regTime, 'yyyy/MM/dd')}]]
</li>
</ul>