최근 Spring Boot & Thymeleaf로 토이 프로젝트를 진행할까 하여 Thymeleaf 태그 정리 겸 문법 공부를 해보고자 한다.
타임리프는 흔히 View Template Engine(뷰 템플릿 엔진)으로 JSP, Freemarker와 같이 서버에서 클라이언트에게 응답할 브라우저 화면을 만들어주는 역할을 한다.
템플릿 엔진
템플릿 엔진이란 동적으로 템플릿을 생성하는 엔진
템플릿 양식과 데이터 입력 자료를 결합하여 결과 문서를 출력하는 소프트웨어를 분리해주는 기능을 한다.
타임리프의 특징
- 서버상에서 동작하지 않아도 된다.
- 순수 HTML 구조를 유지한다.
예를 들어 JSP의 경우는 서버를 동작하지 않으면 화면을 확인 할 수 없었다.
하지만 타임리프는 순수 HTML 구조를 유지하기 때문에 서버 동작 없이도 화면을 확인할 수 있다.
또, 타임리프는 서버 동작시 태그와 HTML만 로딩 시 각각 별도의 태그도 지원한다. 서버 동작 없이도 더미 데이터를 넣고 화면 디자인 및 테스트에 용이하다.
또한, Spring에서도 공식적으로 Thymeleaf 사용을 권장하고 있고, Spring Boot에서는 JSP 사용을 지양하라고 명시하는만큼 Spring Boot에서 JSP 사용 시 호환 및 환경설정에 어려움이 많다.
Spring Boot에서 Thymeleaf는 간편하게 Dependency 추가 작업으로 사용할 수 있다.
문법 정리
th:
- 태그 안의 값을 서버에서 전달 받은 값에 따라서 표현하고자 할 때 사용.
th:text, th:utext의 차이
th:text
- 태그 안에 text 할당
th:utext - 태그 안에 text 할당, html태그가 있다면 태그 값을 반영해서 표시
th:value
- 엘리먼트들의 value값을 지정한다.
th:with
- 변수 값을 지정해서 사용한다.
th:case
- Switch-case 문이 필요할 때 사용.
th:case에서 case문을 다루고, *로 else를 처리
<div th:switch="${hello}">
<p th:case="'admin'">User is an administrator
<p th:case="#{roles.manager}">User is a manager
<p th:case="*">User is a manager
</div>
${...}
- 컨트롤러에서 전달받은 변수에 접근할 수 있으며 th:속성 내에서만 사용할 수 있음.
@{...}
- @{...}안에 적힌 URL은 앞에 contextPath/ + URL을 의미함.
*{...}
-
th:object로 정의된 변수의 변수 값을 의미한다. *{name} -> ${member.name}
Link URL
href는 HTML만 별도로 브라우저에서 실행했을 때 경로 설정이다.
th:href는 타임리프의 문법으로 서버 기동 시 이 태그를 따른다.
타임리프 Link 사용시 @{ ... }으로 사용한다.
URL + (orderId=${result.id})은 URL?orderId=result.id로 URL주소를 사용할 수 있다.
Literal
위 사진에서는 <span th:text="'working web application'">template file</span> 이 눈에 띄는데 서버 기동 시 working web application으로, 아닐경우 emplate file으로 사용한다.
타임리프는 문자 리터럴에서 여러 기능을 지원한다.
- "..." + ${...} + "..."
- | ... #{...} ... |
이처럼 숙련도에 따라서 다양하게 혼합하여 사용할 수도 있다.
if
타임리프 if 태그이다.
th:if="조건"이 false일 경우 태그는 브라우저에서 보이지 않고, true일 경우에만 태그가 브라우저에 노출된다.
마이바티스처럼 <> 사용이 안되기 때문에
| 기호 | 설명 | |
|---|---|---|
  | 줄 바꿈 없는 공백 | |
| < | < | 보다 작은 |
| > | > | 보다 큰 |
| & | & | AND 기호 |
| " | " | 큰따옴표 |
| ' | &apos | 작은따옴표 |
이처럼 관계 연산자 대신 기호를 사용한다.
each
<div th:each="data,status:${datas}">
<h1 th:text="|${status.count} ${data}|"></h1>
</div> data는 각 요소들의 정보이고 status 변수를 추가해서 row에 대한 추가 정보를 얻을 수 있다.
status 속성
index : 0부터 시작
count : 1부터 시작
size : 총 개수
current : 현재 index의 변수
event/odd : 짝수/홀수 여부
first/last : 처음/마지막 여부
Thymeleaf 공식 사이트 참고 자료
Thymeleaf 공식 사이트에 정의된 문법
Thymeleaf 공식 사이트에 정의된 태그
참고
Thymeleaf 공식 사이트 : https://www.thymeleaf.org/
