Spring Thymeleaf 살펴보기

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>

'Spring Framework' 카테고리의 다른 글

Spring @ControllAdvice와 @ExceptionHandler로 전역 예외처리 하기 (0)	2022.10.25
로그인 처리를 위한 UserDetailsService (0)	2022.10.14
Spring ResponseEntity (0)	2022.09.21
Spring Redirect: 다른 URL로 리다이렉트 (0)	2022.09.14
Spring 비동기 처리 @Async, CompletableFuture, TaskDecorator (0)	2022.09.09