Thymeleaf는 Java 웹 애플리케이션에서 널리 사용되는 서버 측 템플릿 엔진으로, HTML을 기반으로 하여 동적인 웹 페이지를 쉽게 생성할 수 있도록 도와준다. 특히, Spring Boot와의 자연스러운 통합으로 백엔드에서 데이터를 간단하게 HTML에 전달할 수 있어 많이 사용된다.
Thymeleaf 기본 문법
Thymeleaf는 HTML 태그에 th: 속성을 추가하는 방식으로 동적 콘텐츠를 생성한다. 이를 통해 서버에서 데이터를 바인딩하거나 조건부 렌더링을 수행할 수 있다.
변수 표현식
Thymeleaf에서 가장 기본적인 기능은 서버 측에서 전달된 데이터를 HTML에 바인딩하는 것이다. 이를 위해 ${}를 사용하여 변수를 표현할 수 있다.
<p>안녕하세요, ${name}님!</p>위 코드는 Spring Controller에서 전달된 name 값을 HTML에 출력하는 예시이다. 만약 name이 "김철수"라면, 브라우저에는 "안녕하세요, 김철수님!"이라고 표시된다.
조건문 (th:if / th:unless)
Thymeleaf에서는 th:if와 th:unless를 사용하여 조건부로 요소를 렌더링할 수 있다.
<p th:if="${isMember}">회원입니다.</p>
<p th:unless="${isMember}">비회원입니다.</p>위 코드는 isMember가 true일 때는 "회원입니다."라는 문구가, 그렇지 않으면 "비회원입니다."라는 문구가 출력된다. if는 익숙하지만 unless는 헷갈린다면, 그냥 반대라고 이해하면 된다. false일 경우 실행된다.
반복문 (th:each)
리스트 또는 배열 같은 컬렉션을 반복할 때 th:each를 사용한다.
<ul>
<li th:each="item : ${items}">[[${item}]]</li>
</ul>위 코드는 items 리스트의 각 항목을 순회하면서 <li> 태그로 출력한다. th:each는 Java의 for문과 비슷한 방식으로 동작한다.
텍스트 및 HTML 출력 (th:text / th:utext)
Thymeleaf에서 텍스트를 출력할 때는 th:text, HTML 코드를 포함한 출력을 할 때는 th:utext를 사용한다.
<p th:text="${message}"></p> <!-- 텍스트 이스케이프 처리 -->
<p th:utext="${htmlContent}"></p> <!-- HTML 그대로 출력 -->th:text는 XSS(크로스 사이트 스크립팅) 공격을 방지하기 위해 기본적으로 이스케이프 처리가 되어 있으며, th:utext는 HTML 태그를 그대로 출력한다.
이스케이프 처리(escape)는 특정 문자가 HTML이나 XML 같은 문서에서 특별한 의미를 가지는 경우, 해당 문자를 일반 텍스트로 처리하도록 변환하는 과정을 말한다. 이스케이프 처리는 주로 웹 애플리케이션에서 보안과 정상적인 텍스트 표시를 위해 사용된다.
예를 들어, HTML에서는 <, >, & 같은 문자가 태그나 엔티티를 표시하는 데 사용되므로, 이 문자를 그대로 출력하려면 이스케이프 처리를 해야 한다. 이스케이프 처리는 이 특수 문자를 HTML 코드가 아니라 일반 텍스트로 취급되도록 변환하는 것이다.
교체 및 삽입 (th:replace / th:insert)
Thymeleaf에서 HTML 구조를 모듈화하고 재사용할 수 있도록 th:replace와 th:insert를 제공한다. 이는 HTML 조각(fragment)을 다른 템플릿에 삽입하거나 교체할 때 사용된다.
th:replace: 지정된 fragment로 현재 태그를 교체한다.th:insert: 지정된 fragment를 현재 태그 내부에 삽입한다.
<div th:replace="~{fragments/header :: header}"></div> <!-- fragments/header.html 파일의 header fragment로 교체 -->
<div th:insert="~{fragments/footer :: footer}"></div> <!-- fragments/footer.html 파일의 footer fragment 삽입 -->이때 ::는 해당 파일 내에서 특정 fragment(조각)를 지정하는 역할을 한다.
링크 처리 (th:href / th:src)
Thymeleaf는 동적으로 URL을 생성할 수 있도록 th:href와 th:src 속성을 제공한다.
<a th:href="@{/products/{id}(id=${productId})}">상품 보기</a>
<img th:src="@{/images/${imageName}}" alt="이미지">@{}: URL 경로를 동적으로 생성한다.th:href와th:src모두 이 구문을 사용해 동적 URL을 처리할 수 있다.
선택 속성 (th:attr)
th:attr는 여러 HTML 속성을 한꺼번에 설정할 수 있는 유용한 기능이다.
<input type="text" th:attr="name=${fieldName}, placeholder=${placeholderText}">이 코드는 name과 placeholder 속성을 동적으로 설정한다. 이를 통해 한 줄의 코드로 여러 속성을 쉽게 바인딩할 수 있다.
자주 사용하는 Thymeleaf 함수
Thymeleaf는 템플릿 안에서 데이터를 변형하거나 처리하기 위한 다양한 내장 함수를 제공한다. 아래는 자주 사용되는 함수들이다.
#strings (문자열 관련 함수)
Thymeleaf의 #strings 객체는 문자열 처리를 위한 다양한 유틸리티 함수를 제공한다.
#strings.replace(String str, String target, String replacement): 문자열 내의 특정 부분을 다른 문자열로 교체한다.#strings.substring(String str, int start, int end): 문자열의 일부분을 추출한다.#strings.capitalize(String str): 문자열의 첫 글자를 대문자로 변환한다.
<p th:text="${#strings.replace(name, '홍', '김')}"></p> <!-- '홍길동'을 '김길동'으로 변경 -->#dates (날짜 관련 함수)
날짜와 시간을 처리하기 위한 #dates 함수들은 날짜 형식을 지정하거나, 현재 날짜를 반환하는 등의 작업에 유용하다.
#dates.format(Object date, String pattern): 날짜를 특정 형식으로 변환한다.#dates.today(): 현재 날짜를 반환한다.#dates.addDays(Object date, int days): 특정 날짜에 일수를 더한다.
<p>오늘 날짜: <span th:text="${#dates.format(today, 'yyyy-MM-dd')}"></span></p>#numbers (숫자 관련 함수)
#numbers는 숫자를 처리하는 데 유용한 함수들을 제공한다.
#numbers.formatNumber(Object number, String pattern): 숫자를 특정 형식으로 변환한다.#numbers.isEven(Object number): 숫자가 짝수인지 확인한다.#numbers.isOdd(Object number): 숫자가 홀수인지 확인한다.
<p>가격: <span th:text="${#numbers.formatNumber(price, 0)}"></span>원</p> <!-- 가격을 정수로 반올림하여 출력 -->#lists (리스트 관련 함수)
리스트를 다룰 때 사용하는 함수들이다.
#lists.size(List<?> list): 리스트의 크기를 반환한다.#lists.isEmpty(List<?> list): 리스트가 비었는지 확인한다.
<p th:if="${#lists.isEmpty(items)}">아이템이 없습니다.</p>#bools (불리언 관련 함수)
불리언 값을 처리할 때 사용할 수 있는 함수들이다.
#bools.isTrue(Boolean value): 값이true인지 확인한다.#bools.isFalse(Boolean value): 값이false인지 확인한다.
<p th:if="${#bools.isTrue(isActive)}">활성 상태입니다.</p>참고
더 자세한 내용은 Thymeleaf 공식 문서를 참조하자.
