[thymeleaf] 타임리프 설명 및 문법 정리

타임리프(thymeleaf)

 

타임리프(thymeleaf)란 스프링부트에서 공식적으로 지원하는 View 템플릿 엔진입니다.

 

타임리프의 목표는 템플릿을 만들 때 유지관리가 쉽도록 하는 것입니다.

이를 위해 디자인 프로토타입으로 사용되는 템플릿에 영향을 미치지 않는 방식인 Natural Templates 기반으로 합니다. Natural Templates은 기존 HTML 코드와 구조를 변경하지 않고 덧붙이는 방식입니다.

 

타임리프 장점

 

- 코드를 변경하지 않기 때문에 서버팀과 퍼블팀 간의 협업이 편해집니다.

- JSP와 달리 Servlet Code로 변환되지 않기 때문에 비즈니스 로직과 분리되어 오로지 View에 집중할 수 있습니다.

- 서버상에서 동작하지 않아도 되기 때문에 서버 동작 없이 화면을 확인할 수 있습니다.

- 서버가 구동하지 않는 경우(정적 컨텐츠)에 더미 데이터를 넣고 화면 디자인 및 테스트에 용이합니다. 

---

 

th:text="${}"

 

- 일반 텍스트를 반환하고자 할 때 사용합니다.

 

th:utext="${}"

 

- th:text와 동일하게 텍스트로 반환하지만, HTML 태그를 사용할 수 있게 해줍니다.

 

th:href="@{}", th:href="||"

 

- <a> 태그의 href 속성과 같이 URL를 지정하여 URL로 이동합니다.

 

th:value="${}"

 

- input의 value에 값을 삽입할 때 사용합니다.

- 여러 값을 넣을 때는 + 기호를 사용합니다.

 

th:style="${}"

 

- 스타일을 적용할 때 사용합니다.

 

th:if="${}", th:unless="${}"

 

- 조건문에 해당하는 속성이며, 각각 if와 else if를 뜻합니다.

 

th:block, th:each="변수명: ${list}"

 

- th:block은 가상 태그를 만들 때 사용하며 사용이 끝나면 문서에서 가상 블록은 사라집니다.

- 주로 조건문이나 반복문에 많이 사용합니다.

 

th:classappend="${}"

 

- 클래스를 동적으로 추가합니다.

 

th:switch, th:case

 

- switch-case문과 동일하며, 제어할 때 태그를 th:block으로 설정합니다.

 

th:action

 

- form data를 보내는 URL을 설정합니다.

 

th:object

 

- form data를 담을 객체를 설정합니다.

 

th:field

 

- 담는 객체의 필드를 동적으로 매핑합니다

- 사용 시 객체의 필드로 id와 name이 자동으로 생성합니다.

 

---

 

ref

https://velog.io/@alicesykim95/Thymeleaf