[Thymeleaf] 타임리프 문법 총정리 : 속성/표현식/조건문/반복문
스프링부트에서 프로젝트를 진행하면서,
타임리프를 사용하게될 일이 점차 늘고있다.
따라서, 타임리프의 속성, 표현식, 조건문, 반복문 등
전반적인 문법들을 공부&정리해두기로했다.
더욱 자세한 내용은 타임리프 공식문서를 참고하길 바란다.
🚩 학습 목표
- 타임리프의 문법에 대한 이해와 사용법 정리 및 연습.
✅ Thymeleaf 속성
1. 일반적 속성 (General Attributes)
HTML, XML, JavaScript, CSS 에서 사용가능한 일반적인 속성으로 , 타임리프가 해석하지 않음,
ex) id, class, title, style, src, href 등
2. 타임리프-특수 속성 (Thymeleaf-specific Attributes)
HTML, XML, JavaScript, CSS 에서 사용가능한 특수 속성 제공.
타임리프가 데이터를 바인딩하고 처리할 수 있도록하는데 사용됨.
| 특수 속성 | 설명 |
| th:text | HTML 태그의 |
| th:if | 조건이 참인 경우, HTML 요소를 표시 |
| th:unless | 조건이 거짓인 경우, HTML 요소를 표시 |
| th:switch th:case |
case의 조건이 참인 경우 HTML 요소를 표시 (함께 사용됨) |
| th:each | 반복문으로 HTML 요소 생성 |
| th:object | HTML 태그에 객체를 바인딩 |
| th:field | 폼 필드에 데이터를 바인딩 |
| th:action | 폼의 액션 URL 설정 |
| th:method | 폼의 HTTP 메서드 설정 |
3. 유틸리티 속성 (Utility Attriutes)
타임리프는 문자, 숫자, 날짜, URI 등 을 편하게 다룰수있는 유틸리티를 제공함.
유틸리티 속성은 타임리프가 제공하는 다양한 유틸리티 기능에 사용됨.
타임리프에서 유틸리티를 사용할때는 #을 사용함.
| 유틸리티 속성 | 설명 |
| th:attr | HTML 태그의 속성 수정 |
| th:replace | 현재요소를 지정된 템플릿으로 대체 |
| th:remove | HTML 요소를 제거 |
| th:with | 변수를 정의하고, 참조값을 제공 |
✅ Thymeleaf 유틸리티
타임리프는 문자, 숫자, 날짜, URI 등 을 편하게 다룰수있는 유틸리티를 제공함.
타임리프에서 유틸리티를 사용할때는 #을 사용함.
| 특수 속성 | 설명 |
| #message | 메시지, 국제화 처리 |
| #uris | URI 이스케이프 지원 |
| #dates | java.util.Date 지원 |
| #calenders | java.util.Calender 서식 지원 |
| #temprals | 자바8 날짜 서식 지원 (날짜는 주로 temporals를 많이 사용!) |
| #numbers | 숫자 서식 지원 |
| #strings | 문자 관련 편의 기능 |
| #objects | 객체 관련 기능 |
| #boolean | boolean 관련 기능 |
| #arrays | 배열 관련 기능 |
| #lists | 컬렉션 관련 기능 |
| #sets | 컬렉션 관련 기능 |
| #maps | 컬렉션 관련 기능 |
| #ids | 아이디 처리 관련 기 |
✅Thymeleaf 표현식
| 표현식 | 문법 | 예시 | 설명 |
| 1. 변수 표현식 (Variable Expressions) |
${...} | ${meber.getName()} (2번과 출력값 같음) |
변수/표현식 출력 |
| 2. 선택 변수 표현식 (Selection Variable Expressions) |
*{...} | *{name} (1번과 출력값 같음) |
객체/리스트에서 값을 선택해 출력 |
| 3. 메시지 표현식 (Message Expressions) |
#{...} | #{label.name} | 스프링 메시지 조 |
| 4. 링크 URL 표현식 (Link URL Expressions) |
@{...} | @{/home} | URL 생성 |
| 6. 조건 표현식 (Conditional Expressions) |
?: (삼항연산자) |
${flag} ? '참' : '거짓' | 조건에 따라 값 출력 |
| 7. 반복 표현식 (Iteration Expressions) |
th:each | < tr th:each="item :${list}"...</tr>> | 반복문으로 리스트/배열 값 출력 |
| 8. Fragment 표현식 (Fragment Expressions) |
th:fragment | <div th:fragment="header">...</div> | 레이아웃 작성 |
| 9. 자바스크립트 인라인 표현식 (JavaScript Inline Expressions) |
[[...]] | var name = '[[${user.name}]]'; | 자바스크립트 코드 작성 |
| 10. 레이아웃 표현식 (Layout Expressions) |
th:include th:replace th:insert th:with |
<div th:include="fragments/header :: header"></div> | 레이아웃 작성 |
✅Thymeleaf 조건문/반복문
타임리프의 조건문과 반복문을 사용해 동적인 데이터 처리 가능.
1. 조건문 (if-else 문)
- if 문 : <div th:if="${조건}"/>
- if-else 문 : <div th:if="${조건}"/> <div th:unless="${조건}"/>
- if-else if-else 문 : <div th:if="${조건1}"/> <div th:elseif="${조건2}"/> <div th:unless="${조건}"/>
<!-- if 문 -->
<div th:if="${조건}">
<!-- 조건이 참일 경우 출력할 내용 -->
</div>
<!-- if-else 문 -->
<div th:if="${조건}">
<!-- 조건이 참일 경우 출력할 내용 -->
</div>
<div th:unless="${조건}">
<!-- 조건이 거짓일 경우 출력할 내용 -->
</div>
<!-- if-else if-else 문 -->
<div th:if="${조건1}">
<!-- 조건1이 참일 경우 출력할 내용 -->
</div>
<div th:elseif="${조건2}">
<!-- 조건2가 참일 경우 출력할 내용 -->
</div>
<div th:else>
<!-- 조건1, 2 모두 거짓일 경우 출력할 내용 -->
</div>
2. 조건문 (swtich 문)
<div th:switch="${변수}">
<p th:case="'값1'">변수가 값1일 경우 출력할 내용</p>
<p th:case="'값2'">변수가 값2일 경우 출력할 내용</p>
<p th:case="'값3'">변수가 값3일 경우 출력할 내용</p>
<p th:case="*">변수가 위의 값들 중 아닐 경우 출력할 내용</p>
</div>
3. 반복문 (each 문)
<!-- 리스트를 이용한 반복문 -->
<ul>
<li th:each="item : ${리스트}">
<span th:text="${item}">리스트 내용 출력</span>
</li>
</ul>
<!-- 맵을 이용한 반복문 -->
<ul>
<li th:each="key, value : ${맵}">
<span th:text="${key}">맵의 키 출력</span>: <span th:text="${value}">맵의 값 출력</span>
</li>
</ul>
참고 문헌:
https://seollica.tistory.com/118
https://maenco.tistory.com/entry/Thymeleaf-Utilities-%EC%9C%A0%ED%8B%B8%EB%A6%AC%ED%8B%B0
https://velog.io/@jji3205/th.xml
