타임리프: Thymeleaf

화면을 동적으로 만들려면 템플릿 엔진을 사용해야 합니다.

 

템플릿 엔진은 데이터를 넘겨 받아 html에 데이터를 넣어 동적인 웹 페이지를 만들어 주는 도구 이다.

타임리프는 스프링의 대표적인 템플릿 엔진으로, 컨트롤러에서 모델(Model)을 통해 데이터를 설정하면 모델은 뷰에서 사용할 수 있게 데이터를 전달해 준다.

 

미리 정의된 템플릿(Template)을 만들고 동적으로 HTML 페이지를 만들어서 클라이언트에 전달하는 방식입니다.

요청이 들어올 때마다 서버에서 새로운 HTML 페이지를 만들어 주기 때문에 서버 사이드 렌더링 방식이라고 부릅니다.

대표적으로 Thymeleaf, JSP, Freemarker, Groovy, Mustache가 있습니다.

Thymeleaf를 사용하면 thymeleaf 문법을 포함하고 있는 html 파일을 서버 사이드 렌더링을 하지 않고 브라우저에 띄워도 정상적인 화면을 볼 수 있습니다.

Thymeleaf의 확장자명은 .html이며 Thymeleaf의 문법은 html 태그 안쪽에 속성으로 사용됩니다.

 

장점

디자이너 또는 퍼블리셔는 자신이 작업한 내용을 html 파일로 열어서 바로 확인 할 수 있으며,

개발자는 디자이너 또는 퍼블리셔로부터 html 파일을 받아서 html 태그 안에 Thymeleaf 문법을 추가하는 것만으로 동적으로 html 파일을 생성할 수 있습니다.

 

---

표현식

${ } 변수의 값 표현식

#{ } 속성 파일 값 표현식

@{ } url 표현식

*{ } 선택한 변수의 표현식. th:object에서 선택한 객체에 접근

 

---

문법

th:text 텍스트를 표현할 때 사용

예제: th:text{person.name}

 

th:each 컬렉션을 반복할 때 사용

예제: th:each=”person:${persons}”

 

th:if 조건이 true인 때만 표시

예제: th:if=”${person.age}≥20”

 

th:unless 조건이 false 일 때만 표시

예시: th:unless=”${person.age}≥20”

 

th:href 이동 경로

예제: th:href=”@{/persons(id=$(person.id))}”

 

th:with 변수값으로 지정

예제: th:with=”name=${person.name}”

 

th: object 선택한 경로로 지정

예제: th:object=”${person}”