Thymeleaf는 자바 기반 템플릿 엔진으로, HTML, XML, JavaScript, CSS 등의 파일을 렌더링하는 데 사용됨. Spring Boot와의 통합이 잘 되어 있어 뷰(View) 레이어에서 자주 사용되며, HTML 문서를 렌더링하거나 웹 페이지를 동적으로 생성하는 데 유용함.
Thymeleaf는 서버 사이드 렌더링을 지원하며, 개발 시 HTML 파일을 그대로 브라우저에서 열어도 올바르게 동작하도록 설계됨. 이는 개발 중에 브라우저에서 HTML 파일을 미리 볼 수 있는 장점이 있음.
Thymeleaf의 주요 특징
자연스러운 템플릿(Natural Templates)
Thymeleaf는 HTML 문법을 그대로 유지하면서 서버에서 데이터를 렌더링할 수 있음. HTML 문서에 Thymeleaf 템플릿을 추가하더라도 브라우저에서 오류 없이 문서를 볼 수 있음.
개발자는 Thymeleaf 템플릿을 미리보기로 확인할 수 있으며, 브라우저에서 마치 일반 HTML처럼 동작함.
표현식 언어(Thymeleaf Expression Language)
Thymeleaf는 다양한 표현식을 통해 데이터에 접근할 수 있는 문법을 제공함. 이는 서버에서 Model 객체나 속성(attribute)을 받아 뷰에 렌더링할 수 있게 해줌.
주요 표현식
${ }: 변수를 출력할 때 사용함.
#{ }: 메시지 프로퍼티에서 값을 가져올 때 사용함.
@{ }: URL을 생성할 때 사용함.
*{ }: 선택된 객체에서 값을 가져올 때 사용함 (form 처리 시 주로 사용).
태그 속성 지원
Thymeleaf는 다양한 HTML 태그 속성을 제공하며, 이를 통해 동적으로 태그 내용을 렌더링하거나 제어할 수 있음.
th:text th:if th:each 등
서버 사이드 렌더링(Server-side rendering, SSR)
Thymeleaf는 서버에서 HTML 문서를 완성하여 브라우저로 보냄. 브라우저는 서버에서 생성된 완성된 HTML 파일을 그대로 렌더링함. 즉, 클라이언트는 JavaScript 등을 사용하지 않아도 페이지의 모든 데이터를 볼 수 있음.
HTML5와 완벽한 호환
설명: Thymeleaf는 HTML5 표준을 준수하며, HTML5와 완벽하게 호환됨. 이를 통해 웹 표준을 유지하면서 동적 페이지를 생성할 수 있음.
Thymeleaf의 기본 사용법
템플릿 설정 (Spring Boot에서 Thymeleaf 설정)
Spring Boot에서는 Thymeleaf가 기본 템플릿 엔진으로 설정될 수 있음. 다음은 Thymeleaf 템플릿 설정을 간단히 설명한 예시임.
build.gradle에 Thymeleaf 의존성을 추가해야 함
dependencies {
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
}기본적으로 Spring Boot는 /templates/ 폴더에 Thymeleaf 템플릿 파일을 저장하고, 템플릿 파일의 확장자는 .html임.
컨트롤러에서 모델 데이터 전달
@Controller
public class HomeController {
@GetMapping("/home")
public String home(Model model) {
model.addAttribute("greeting", "Hello, Thymeleaf!");
return "home"; // home.html 템플릿을 사용함
}
}Model 객체에 데이터를 담아 뷰 템플릿으로 전달할 수 있음.
home은 home.html 파일을 의미하며, /templates/ 폴더 내에 위치해야 함.
Thymeleaf 템플릿 파일 예시 (home.html)
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Thymeleaf Example</title>
</head>
<body>
<h1 th:text="${greeting}">Placeholder text</h1>
</body>
</html>th:text : Thymeleaf에서 변수를 출력할 때 사용하는 속성임. ${greeting}은 컨트롤러에서 전달된 모델 데이터를 가져옴.
결과: "Hello, Thymeleaf!"가 출력됨.
Thymeleaf의 주요 속성
th:text
(텍스트 출력)
해당 태그에 텍스트를 출력할 때 사용함.
<p th:text="${message}">기본값</p>${message} 값을 출력함. 만약 message가 "Welcome!"이라면,
태그 내부에 Welcome!이 출력됨.
th:if / th:unless
(조건부 렌더링)
조건에 따라 HTML 요소의 출력 여부를 결정함.
<p th:if="${user != null}">사용자가 로그인했습니다</p>
<p th:unless="${user != null}">사용자가 로그인하지 않았습니다</p>user 객체가 null이 아닐 때 첫 번째 문장이 출력되고, null일 때는 두 번째 문장이 출력됨.
th:each
(반복 처리)
리스트나 배열을 반복하여 HTML 요소를 출력할 때 사용함.
<ul>
<li th:each="user : ${users}" th:text="${user.name}">사용자 이름</li>
</ul>사용 예시: users 리스트의 각 user 객체에서 name 값을 출력함.
<li> 태그가 사용자 수만큼 반복됨.
th:href / th:src
(링크와 이미지 경로 처리)
링크(href)와 이미지(src) 경로를 동적으로 처리함.
<a th:href="@{/profile/{id}(id=${user.id})}">프로필</a>
<img th:src="@{/images/user.png}" alt="User Image">th:href는 id 값을 동적으로 삽입하여 URL을 생성함.
th:src는 이미지 경로를 설정함.
th:attr
(속성 처리)
HTML 요소의 여러 속성을 동적으로 처리할 때 사용함.
코드 복사
<input type="text" th:attr="value=${user.name}, placeholder='이름을 입력하세요'"/>value 속성은 user.name으로, placeholder는 "이름을 입력하세요"로 설정됨.
th:fragment
(템플릿 분리 및 재사용)
템플릿 조각을 만들어 다른 템플릿에서 재사용할 수 있음.
th:insert나 th:replace로 불러와 사용할 수 있음.
header.html
<div th:fragment="header">
<h1>헤더 부분</h1>
</div>main.html
<html xmlns:th="http://www.thymeleaf.org">
<body>
<div th:insert="~{header :: header}"></div>
<p>메인 콘텐츠</p>
</body>
</html>th:fragment로 정의된 header를 th:insert로 다른 템플릿에 삽입함.
th:remove
(태그 제거)
특정 조건에 따라 HTML 요소를 삭제함.
<div th:remove="tag">이 태그는 제거됩니다</div>th:remove="tag"는 해당 div 태그를 HTML에서 완전히 제거함.
Thymeleaf 폼 처리
Thymeleaf는 Spring의 폼 처리와 연동되어 자주 사용됨. 특히 Spring MVC와 함께 사용할 때 폼 데이터를 쉽게 바인딩하고 처리할 수 있음.
폼 필드 바인딩
<form th:action="@{/submit}" th:object="${user}" method="post">
<input type="text" th:field="*{name}" placeholder="이름"/>
<input type="number" th:field="*{age}" placeholder="나이"/>
<button type="submit">제출</button>
</form>th:object: 폼 객체를 바인딩함.
th:field: 폼 필드와 객체의 필드를 바인딩함.
폼 데이터 처리 (컨트롤러)
@PostMapping("/submit")
public String submit(@ModelAttribute User user) {
// 사용자 데이터를 처리
return "result";
}th:field로 바인딩된 데이터를 컨트롤러에서 @ModelAttribute로 받아 처리할 수 있음.
Thymeleaf의 장점
자연스러운 템플릿 디자인: Thymeleaf는 HTML 파일을 그대로 브라우저에서 열어도 깨지지 않기 때문에 디자이너와 협업 시 유리함.
쉬운 통합: Thymeleaf는 Spring과의 통합이 매우 간단하며, Spring Boot 프로젝트에서 기본 템플릿 엔진으로 바로 사용할 수 있음.
서버 사이드 렌더링: Thymeleaf는 서버에서 HTML을 렌더링한 후 클라이언트로 전송하기 때문에, SEO(검색엔진최적화)와 접근성에 유리함.
표준 HTML5와 호환: HTML5와 완벽히 호환되므로, 최신 웹 표준을 유지하면서 동적 페이지를 작성할 수 있음.
다양한 표현식 지원: 데이터 바인딩, URL 생성, 조건부 렌더링, 반복 렌더링 등 강력한 템플릿 언어 표현식을 제공하여, 복잡한 로직도 쉽게 처리 가능.
결론
Thymeleaf는 서버에서 동적으로 HTML을 렌더링하고, Spring과의 통합이 쉽기 때문에 Spring MVC나 Spring Boot 프로젝트에서 많이 사용됨. 자연스러운 HTML 템플릿, 강력한 표현식 언어, 다양한 HTML 속성 지원 등을 통해 유연하고 직관적인 뷰 템플릿을 작성할 수 있음.
