Thymeleaf
- 템플릿 엔진
- 백엔드 서버에서 HTML을 동적으로 랜더링 하는 용도로 사용됨
특징
- 순수 HTML을 최대한 유지하는 특징을 가짐
- JSP와 유사하게 ${}을 별도의 처리 없이 이용할 수 있음
- Model에 담긴 객체를 화면에서 JavaScript로 처리하기 편리함
- 연산이나 포맷과 관련된 기능을 추가적인 개발 없이 지원함
- 개발 도구를 이용할 때 .html 파일로 생성하는데 문제가 없고 별도의 확장자를 이용하지 않음
타임리프 엔진 캐싱 비활성화
-
템플릿 파일을 수정할 때마다 애플리케이션을 다시 시작하지 않고도 변경된 내용 즉시 반영 가능
-
템플릿 변경 사항을 실시간으로 확인하고 디버깅하는데 용이함
-
application.properties파일에 아래 내용 추가
spring.thymeleaf.cache=false
기본 기능들
태그
- 기존의 속성 앞에 'th:'를 붙여 주고 속성값 지정
- 별도의 태그를 이용하지 않고 HTML을 그대로 유지한 상태에서 필요한 내용을 추가해 개발
- th:*로 속성을 적용하면 기존 HTML 속성 대체. 만약 기존 속성이 없으면 새로 생성
<!doctype html>
<html lang="en" xmlns:th="http:/www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1 th:text="${'Hello World'}"></h1>
</body>
</html>반복문 처리
- th:each 속성 사용
th:each = "변수: ${목록}"
- 태그 내에 dto라는 변수를 만들어서 사용. model로 전달된 데이터는 ${list}를 이용해서 처리
<body>
<ul>
<li th:each="dto : ${list}">
[[${dto}]]
</li>
</ul>
</body>
삼항연산자
- 단순 if와 같이 2항만으로 처리할 수 있음(맨 뒤에꺼 생략 가능)
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.target {
background-color: red;
}
</style>
</head>
<body>
<ul>
<li th:each="dto, state : ${list}" th:text="${dto.sno % 5 == 0} ? ${dto.sno} : ${dto.first}"></li>
</ul>
<ul>
<li th:each="dto, state : ${list}" th:class="${dto.sno % 5 == 0} ? 'target' : ''" th:text="${dto}"></li>
</ul>
</body>
</html>
링크 처리
- '@{}'를 이용해서 사용
- 파라미터를 전달해야 하는 상황에서 좀 더 가독성 좋은 코드를 만들 수 있음
컴퓨터가 이해하는 코드는 바보도 작성할 수 있다. 사람이 이해하도록 작성하는 프로그래머가 진정한 실력자다. -마틴 파울러