Thymeleaf

Thymeleaf란

템플릿 엔진

가공한 데이터를 이용해 HTML 페이지를 동적으로 만드려면 템플릿 엔진을 사용해야 한다.
요청이 올 때마다 서버에서 새로운 HTML 페이지를 만들어 주기 때문에 서버 사이드 렌더링 방식이라고 한다.
​
서버 사이드 템플릿 엔진으로는 Thymeleaf, JSP, Freemarker, Groovy, Mustache 등이 있지만, 스프링에서 권장하고 가장 인기가 많은 것은 Thymeleaf이다.
​

Thymeleaf

타임리프의 가장 큰 장점은 'natural templates'라는 것인데, 타임리프 문법을 포함하고 있는 HTML 파일을 서버 사이드 렌더링을 하지 않고 브라우저에 띄워도 정상적인 화면을 볼 수 있다.
타임리프의 확장자명은 .html이며, 타임리프의 문법은 html 태그 안쪽에 속성으로 사용된다.

문법

if-else 조건문

<div th:if="${info.useYn == 'Y'}">사용</div>
<div th:unless="${info.useYn == 'Y'}">사용안함</div>

<div th:if = "${examData != null}"> ... <div>

​
조건문 내에서 enum값과 비교하고 싶을 때는

<button th:if="${item.status == T(com.karrot.constant.ItemSellStatus).SOLD_OUT}">거래완료</button>

이런 식으로 사용하면 된다

<a> URL 이동

@{/hello/{param1}/{param2}(param1=$ {param1}, param2=${param2})} -> /hello/data1/data2

 <a th:href="@{/hello/{param1}/{param2}(param1=${param1}, param2=${param2})}">경로 변수가 포함된 URL</a>

자바스크립트 인자 전달

<a class="edit-a" th:onclick="button_event([[${item.id}]])">삭제</a>

onclick이 아니라 th:onclick으로 써야하고, [[${}]] 안에 넣어줘야 한다!

​

참고자료

https://devday.tistory.com/entry/Thymeleaf에서-enum-값-사용하기
https://jddng.tistory.com/231