Thymeleaf란?
- Thymeleaf는 Spring Framework에서 많이 사용되는 템플릿 엔진입니다.
- HTML 파일에 동적으로 데이터를 넣을 수 있으며 서버 사이드 렌더링 (SSR)을 지원합니다.
- HTML 코드와의 호환성이 뛰어나 브라우저에서도 쉽게 확인할 수 있습니다.
Thymeleaf 주요 특징
-
HTML과의 자연스러운 통합
- HTML 코드 안에 Thymeleaf 문법을 작성할 수 있습니다.
- Thymeleaf 문법을 사용하지 않아도 브라우저에서 HTML로 잘 렌더링됩니다.
-
서버 사이드 렌더링
- 컨트롤러에서 데이터를 뷰(View)로 전달하면, Thymeleaf가 HTML에 데이터를 삽입합니다.
-
표준 HTML5 문법 사용
- 기존 HTML 문법에 추가 속성(attribute)으로 Thymeleaf 코드를 작성합니다.
기본 문법
1. 표현식 - 데이터를 출력하는 방법
Thymeleaf에서 데이터를 표현하는 문법은 ${}을 사용합니다.
<p th:text="${name}">이름</p>th:text속성은 컨트롤러에서 전달된 name 값을 화면에 출력합니다.이름은 Thymeleaf 문법이 동작하지 않는 경우에 보여질 기본 값입니다.
2. 변수 설정 - th:with
변수를 선언하여 코드 중복을 줄일 수 있습니다.
<div th:with="welcomeMessage=${'Hello ' + name}">
<p th:text="${welcomeMessage}">Welcome</p>
</div>th:with를 사용해 welcomeMessage라는 변수에 값을 할당하고 사용합니다.
3. 반복문 - th:each
th:each를 사용하면 리스트나 배열을 반복해서 출력할 수 있습니다.
<ul>
<li th:each="user : ${userList}" th:text="${user.name}">사용자 이름</li>
</ul>userList는 컨트롤러에서 전달한 데이터입니다.user는 반복 시 하나씩 꺼내 쓰는 변수입니다.${user.name}는 각 사용자 객체의name필드를 출력합니다.
4. 조건문
if 조건 - th:if
<p th:if="${age >= 18}" th:text="'성인입니다'">조건</p>
<p th:if="${age < 18}" th:text="'미성년자입니다'">조건</p>unless 조건 - th:unless
<p th:unless="${age >= 18}" th:text="'미성년자입니다'">조건</p>3항 연산자 사용
<p th:text="${age >= 18} ? '성인입니다' : '미성년자입니다'">조건</p>5. 링크 처리 - th:href
링크를 동적으로 생성할 때 사용합니다.
<a th:href="@{/user/profile(id=${user.id})}">사용자 프로필</a>@{}문법은 링크를 동적으로 생성합니다.- URL에 파라미터를 전달할 때도 사용됩니다.
6. HTML 속성 설정
다양한 HTML 속성에 값을 동적으로 할당할 수 있습니다.
<img th:src="@{/images/logo.png}" alt="로고" />
<input type="text" th:value="${username}" />th:src: 이미지 소스를 동적으로 설정합니다.th:value: 입력 필드의 값을 설정합니다.
7. Fragment 사용 (템플릿 재사용)
th:insert, th:replace, th:include를 사용하면 템플릿 일부를 재사용할 수 있습니다.
fragment 파일 (header.html):
<div th:fragment="header">
<h1>공통 헤더</h1>
</div>재사용하는 파일:
<html>
<body>
<div th:replace="~{fragments/header :: header}"></div>
</body>
</html>::뒤에는 fragment의 이름을 지정합니다.
8. JavaScript 인라인 처리
Thymeleaf를 사용하면 JavaScript 코드에 서버 데이터를 쉽게 삽입할 수 있습니다.
<script th:inline="javascript">
var username = [[${username}]]; // 서버 데이터 삽입
console.log(username);
</script>[[${}]]는 JavaScript에 데이터를 삽입하는 표현식입니다.
Thymeleaf를 사용한 Controller 예시
컨트롤러 코드
@Controller
public class UserController {
@GetMapping("/users")
public String getUsers(Model model) {
List<User> userList = Arrays.asList(new User("John"), new User("Jane"));
model.addAttribute("userList", userList);
return "userList";
}
}Thymeleaf 뷰 코드 (userList.html)
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>사용자 목록</title>
</head>
<body>
<h1>사용자 목록</h1>
<ul>
<li th:each="user : ${userList}" th:text="${user.name}">사용자 이름</li>
</ul>
</body>
</html>결론
Thymeleaf는 HTML과의 자연스러운 통합과 직관적인 문법 덕분에 많은 개발자에게 사랑받는 템플릿 엔진입니다.
- 정적 HTML을 유지하면서 동적 데이터 삽입이 가능하며, 반복문, 조건문과 같은 다양한 기능을 제공합니다.
- 재사용성을 높이는 fragment 기능 덕분에 유지보수가 쉽습니다.
Spring Boot 프로젝트에서 Thymeleaf를 활용하면 빠르게 화면을 구현할 수 있습니다.
추가 학습 자료
🌱