Java 웹 애플리케이션에서 HTML 템플릿 엔진으로 사용되는 라이브러리
서버에서 동적으로 데이터를 렌더링하여 HTML을 생성하며, Spring Boot와 잘 통합되어 뷰(View)를 생성하는데 널리 사용됨
Thymeleaf의 주요 특징
1. HTML 템플릿 파일로 작동
- 순수 HTML로 디자인 할수 있어 HTML파일이 브라우저에서도 제대로 표시됨
- 개발자와 디자이너가 동일한 파일을 사용할 수 있음
2. Spring MVC와 강력한 통합
- 컨트롤러에서 전달된 모델 데이터를 쉽게 활용 가능
3. 표현식 기반의 문법 지원
- 데이터 바인딩, 반복, 조건문 등을 쉽게 처리할 수 있음
4. 확장성
- 커스텀 태그와 속성을 정희할 수 있어 유연한 사용이 가능
5. 서버 및 클라이언트에서 모두 동작 가능
- 서버 사이드 렌더링을 기본으로 지원하지만, 클라이언트 렌더링에도 사용할수 있음
기본 문법
1. 데이터 바인딩
- 데이터 출력은 ${} 표현식을 사용
<p>Hello, <span th:text="${name}">Name</span>!</p>- 위 코드에서 컨트롤러에서 전달한 name의 값이 span태그안에 출력
2. 반복 처리
- 데이터를 반복 출력할때 th:each를 사용
<ul>
<li th:each="item : ${items}" th:text="${item}"></li>
</ul>- items는 리스트 데이터, 각 요소가 li태그에 출력
3. 조건문
- 조건문에 th:if 와 th:unless 를 사용
<p th:if="${user != null}" th:text="${user.name}">Default User</p>
<p th:unless="${user != null}">No User Available</p>- user가 존재하면 이름 출력, 없으면 다른 메세지 출력
4. URL처리
- th:href 와 th:src 로 동적으로 URL을 설정 가능
<a th:href="@{/home}">Home</a>
<img th:src="@{/images/logo.png}" alt="Logo">
5. 폼 처리
- 폼 필드와 객체 바인딩
<form action="#" th:action="@{/submit}" th:object="${user}" method="post">
<input type="text" th:field="*{name}" />
<input type="text" th:field="*{email}" />
<button type="submit">Submit</button>
</form>- th:object를 통해 user 객체와 바인딩하여, 입력값을 자동으로 객체 필드에 매핑
| 속성 | 설명 |
| th:text | HTML 요소에 텍스트 출력 |
| th:utext | HTML 요소에 텍스트를 출력하며, HTML 태그를 렌더링 |
| th:each | 반복문 |
| th:if | 조건문. 조건이 참일 경우 렌더링 |
| th:unless | 조건이 거짓일 경우 렌더링 |
| th:href | 동적으로 URL 생성 |
| th:src | 동적으로 이미지 등의 경로 설정 |
| th:field | 폼 데이터 바인딩 |
| th:value | 입력 필드의 기본값 설정 |
Thymeleaf 와 Spring Boot 통합
1. 의존성 추가
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>2. 디렉토리 구조
기본적으로 resourses/templates 디렉토리에 위치
src/main/resources/templates/
├── index.html
├── about.html3. Controller와 연동
컨트롤러에서 모델 데이터를 전달하면 Thymeleaf 템플릿에서 이를 활용해 HTML을 생성
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class HomeController {
@GetMapping("/")
public String home(Model model) {
model.addAttribute("name", "John");
return "index"; // templates/index.html 파일 렌더링
}
}4. 예제 템플릿
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Thymeleaf Example</title>
</head>
<body>
<h1>Welcome, <span th:text="${name}">Guest</span>!</h1>
</body>
</html>Thymeleaf 확장 기능
1. 템플릿 조각
- 공통된 UI 요소 (예: 헤더, 푸터)를 별도 파일로 분리하여 재사용가능
th:insert 또는 th:replace 사용
<!-- header.html -->
<header>
<h1>Site Header</h1>
</header><!-- main.html -->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<div th:insert="~{fragments/header :: header}"></div>
<p>Main content here</p>
</body>
</html>
2. 국제화(i18n)
- 다국어 지원을 위해 메세지 프로퍼티 파일 사용 가능
messages.properties :
greeting=Hello, {0}!
messages_ko.properties :
greeting=안녕하세요, {0}!
템플릿에서 :
<p th:text="#{greeting('John')}"></p>장단점
장점
1. 순수 HTML과 유사하여 협업이 용이
2. Spring Boot 와 강력한 통합
3. 커스터마이징 및 확장 기능 지원
4. 강력한 데이터 바인딩 및 폼 처리
단점
1. 서버 사이드 렌더링 기반으로 동작하므로 클라이언트 중심 애플리케이션에는 적합하지 않음
2. 복잡한 UI를 처리하기에는 제약이 있음
정리
1. Thymeleaf란?
- Java 웹 애플리케이션에서 HTML을 동적으로 생성하는 템플릿 엔진
2. 기능
- 데이터 바인딩, 반복, 조건문, URL 처리, 폼 바인딩 등
3. Spring Boot 통합
- Spring MVC와 연동하여 템플릿에서 동적 데이터 출력
4. 장점
- 사용법이 간단하며 Spring과의 호환성이 뛰어남
출처 : ChatGPT
'BE > Spring & Spring Boot' 카테고리의 다른 글
| [Spring Boot] 관련 어노테이션 (0) | 2025.01.01 |
|---|---|
| [Spring Boot] Validation 유효성 검사 (0) | 2024.12.30 |
| [Spring Boot] Page (0) | 2024.12.27 |
| [Spring Boot, Java] Cascade (0) | 2024.12.26 |
| [Spring Boot, JPA] 스냅샷 (1) | 2024.12.25 |