Thymeleaf (타임리프) ?
타임리프는 Spring Framework를 사용하는 개발자들에게 JSP 대신 쓰이는 템플릿 엔진입니다. HTML 5를 준수하는 형태로 기술할 수 있기 때문에 타임리프는 웹 어플리케이션에 적합한 템플릿 엔진입니다.
요즘 서비스에서는 JSP와 타임리프는 잘 쓰이진 않습니다. 백엔드에서는 데이터를 JSON으로 전달하고 프론트엔드에서는 리액트나 뷰로 전달받은 데이터를 가공하기 때문입니다. 타임리프가 최근 자주 쓰이는 용도로는 백엔드에서 간단히 관리자(Admin) 페이지를 만드는 경우입니다. 같이 협업해서 결과를 산출하는 실무에서는 잘 쓰이진 않지만 공부하는 차원에서 포스팅하도록 하겠습니다.
Thymeleaf 사용 설정
dependencies {
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
}Thymeleaf 이용한 html 파일 생성
- 파일 경로(Default): resources/templates/
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1 th:text="${'Test Text'}"></h1>
</body>
</html>`th:text`: 화면에 값을 출력
Thymeleaf 문법
- `${...}`: 컨트롤러에서 전달된 데이터 값 출력
- `th:text`: 화면에 값 출력
- `th:if`, `th:unless`, `th:switch`, `th:case`: 조건문
<p th:unless="${isMale}">여자입니다.</p>- `th:each`: 반복문
<!-- 방법 1 -->
<li th:each = "user: ${users}" th:text="${user}"></li>
<!-- 방법 2 -->
<li th:each = "user: ${users}" th:if = "${user.no % 2 == 1}">
[[${user}]] 는 홀수 번호 입니다.
</li>
<!-- index 사용 --.
<li th:each = "user, state: ${users}">
[[${state.index}]]: [[${user}]]
</li>- `th:href`, `th:src`: 링크URL이나 이미지URL을 설정
<a th:href="@{/users/${userId}}">[[${user.no}]]</a>
<img th:src="@{/images/logo.png}" alt="Logo">
<!-- URL에 파라미터 넘기기 -->
<a th:href="@{/users(id = ${userId})}">[[${user.no}]]</a>Thymeleaf 레이아웃 처리
th:insert, th:replace, th:include, th:fragment (th:include는 deprecated)
`th:fragment`
- 템플릿 조각을 정의하는데 사용됩니다.
- 템플릿의 일부분을 이름을 지정하여 정의하고, 다른 곳에서 해당 조각을 포함하거나 대체할 수 있습니다.
- header, footer, ...와 같이 여러 화면에 공통적으로 표시되는 화면을 구성하기 위해 쓰이며 어떤 방식으로 화면에 포함될지에 따라 `insert` 방식과 `replace` 방식으로 나뉩니다.
<div th:fragment="header">
<h1>Header</h1>
</div>
<div th:fragment=body">
<h1>Body</h1>
</div>
경로가 아래와 같다고 가정
- src
- main
- resources
- templates
- fragments
- header.html
- index.html
`th:insert`
- 다른 템플릿 파일에 정의된 템프릿 조각을 현재 템플릿에 삽입할때 사용됩니다.
- 아래 코드는 `index.html` 파일에서 `header.html`을 포함하는 경우 입니다.
- `~{fragments/headers}`
- ~ : Thymeleaf에서 상대 경로를 지정할 때 사용됩니다. 즉 templates에서 상대 경로로 해서 `header.html` 파일의 경로를 나타냅니다.
- `:: header` : 삽입할 템플릿 파일의 일부분을 지정합니다.
<div th:insert="~{fragments/header :: header}"></div>
`th:replace`
현재 요소를 다른 템플릿 파일에 정의된 템플릿 조각으로 대체합니다. `th:insert`와는 삽입에서 대체로 바꼈다는 점 빼고 같습니다.
<div th:replace="~{fragments/header :: header}"></div>