Thymeleaf는 자바 기반의 서버 템플릿 엔진으로, HTML을 사용하여 서버 측에서 데이터를 렌더링하는 데 사용됩니다. Spring Boot와 함께 사용될 때는 특히 MVC(Model-View-Controller) 패턴에 적합하여 정적 HTML 파일에 동적인 데이터를 삽입해 클라이언트에게 전달하는 방식으로 웹 페이지를 생성합니다.
Thymeleaf의 주요 특징
1. HTML 친화적:
• Thymeleaf는 HTML 파일에서 직접 템플릿 엔진 기능을 추가할 수 있는 태그 속성(th:text, th:href 등)을 제공합니다.
• HTML 표준을 유지하면서, 브라우저에서 직접 확인할 수 있어 디자이너와 개발자 간의 협업에 용이합니다.
2. 서버 사이드 렌더링:
• 클라이언트가 요청을 보낼 때 서버가 HTML을 생성하여 완성된 웹 페이지를 클라이언트로 전달합니다.
• 데이터 렌더링과 로직 처리를 모두 서버에서 진행하기 때문에 SEO 친화적이며, 빠른 초기 로딩이 가능합니다.
3. Spring MVC와 통합 용이:
• Thymeleaf는 Spring Framework와 자연스럽게 통합되어 컨트롤러의 데이터와 모델을 템플릿에서 쉽게 사용하게 해줍니다.
• Spring Boot에서는 Thymeleaf 의존성을 추가하면 기본적으로 통합되어 있습니다.
Thymeleaf의 주요 문법과 기능
Thymeleaf는 HTML 태그의 속성으로 동작하며, 주요 속성은 다음과 같습니다.
1. th:text
• 텍스트를 삽입하고 값을 출력하는 데 사용됩니다.
• ${} 문법으로 모델의 데이터를 표현식으로 출력할 수 있습니다.
<p th:text="${message}">Hello, World!</p>
2. th:if, th:unless
• 조건에 따라 콘텐츠를 표시하거나 숨길 수 있습니다.
<p th:if="${isUserLoggedIn}">Welcome, User!</p>
<p th:unless="${isUserLoggedIn}">Please log in to continue.</p>
3. th:each
• 컬렉션 데이터(리스트 등)를 반복하여 출력하는 데 사용합니다.
• 예를 들어, 사용자 목록을 출력하는 경우:
<ul>
<li th:each="user : ${userList}" th:text="${user.name}">User Name</li>
</ul>
4. th:href, th:src
• 링크나 이미지 경로를 동적으로 생성할 때 사용합니다.
• 예를 들어, 사용자 페이지 링크에 사용자 ID를 동적으로 추가하는 경우:
<a th:href="@{/user/{id}(id=${user.id})}">Profile</a>
5. th:include, th:replace
• 중복된 레이아웃이나 공통 요소를 별도 파일로 분리하여 포함할 수 있습니다.
• 예를 들어, 헤더나 푸터 같은 공통 요소를 따로 작성하여 여러 템플릿에서 재사용할 수 있습니다.
<div th:include="fragments/header :: header"></div>
<div th:replace="fragments/footer :: footer"></div>
6. th:object와 폼 바인딩
• 폼을 렌더링하고 객체와 바인딩할 때 사용됩니다. 주로 Spring의 @ModelAttribute와 함께 사용합니다.
<form th:action="@{/submit}" th:object="${user}" method="post">
<input type="text" th:field="*{username}" placeholder="Username" />
<input type="password" th:field="*{password}" placeholder="Password" />
<button type="submit">Submit</button>
</form>
Thymeleaf의 템플릿 레이아웃 기능
Thymeleaf는 공통 레이아웃을 위한 템플릿 레이아웃 기능을 제공합니다. 일반적으로 레이아웃을 정의하는 템플릿 파일을 생성하고 각 페이지가 이를 상속하는 방식으로 구현할 수 있습니다.
1. 기본 레이아웃 템플릿 작성:
• 헤더, 내비게이션, 푸터 등의 공통 부분을 layout.html에 정의합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title th:text="${pageTitle}">My Page</title>
</head>
<body>
<header th:include="fragments/header :: header"></header>
<main th:replace="~{::content}"></main>
<footer th:include="fragments/footer :: footer"></footer>
</body>
</html>
2. 개별 페이지에서 레이아웃 확장:
• 페이지마다 필요한 콘텐츠만 정의하고, 공통 레이아웃을 상속합니다.
<section th:fragment="content">
<h1>Page Content</h1>
<p>This is the specific content for this page.</p>
</section>
Thymeleaf와 Spring Boot의 통합
Spring Boot에서 Thymeleaf는 spring-boot-starter-thymeleaf 의존성을 추가하는 것만으로 쉽게 통합됩니다.
• resources/templates 폴더에 .html 파일을 저장하면, Spring MVC 컨트롤러에서 모델 데이터를 받아 렌더링할 수 있습니다.
• 예를 들어, 컨트롤러에서 model.addAttribute("message", "Hello, Thymeleaf!");를 설정하면, 템플릿에서 ${message}를 통해 접근할 수 있습니다.
Thymeleaf의 장점과 단점
장점
• 서버 사이드 렌더링: SEO에 유리하며, 초기 로딩 속도가 빠릅니다.
• HTML 친화적: HTML 파일 그대로 개발 가능해 디자이너와 협업에 용이합니다.
• Spring과의 높은 호환성: Spring MVC와의 통합이 자연스러워 템플릿 엔진으로 많이 사용됩니다.
단점
• 클라이언트 측 동적 UI 부족: 서버 렌더링 방식이므로, SPA(싱글 페이지 애플리케이션) 구현에는 한계가 있습니다.
• JavaScript와의 통합 부족: 복잡한 UI 처리가 필요한 경우 Vue.js나 React 같은 프론트엔드 프레임워크가 더 적합할 수 있습니다.
결론
Thymeleaf는 HTML 기반의 템플릿 엔진으로, 서버 측에서 동적 HTML 생성을 통해 클라이언트에게 완성된 페이지를 제공할 때 유용합니다. Spring Boot와 통합이 용이하고, SEO에 적합하며, 웹 애플리케이션에서 흔히 사용되는 탬플릿 엔진으로 널리 활용됩니다.
'Spring Boot' 카테고리의 다른 글
| SLF4J의 로그 레벨 (0) | 2024.12.13 |
|---|---|
| HikariCP (1) | 2024.10.22 |
| Spring Data JPA (1) | 2024.10.22 |
| spring.factories (2) | 2024.10.21 |
| @Import (0) | 2024.10.21 |
