🎯 Thymeleaf vs jsp
//jsp (hello.jsp)
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ page language="java" %>
<html>
<head>
<title>Hello Page</title>
</head>
<body>
<h1>Hello, ${name}!</h1>
</body>
</html>// thymeleaf (hello.html)
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Hello Page</title>
</head>
<body>
<h1 th:text="'Hello, ' + ${name} + '!'">Hello, John Doe!</h1>
</body>
</html>🥠 Bean 설정
- 자동 설정(auto-configuration)
- templateResolver, templateEngine, viewResolver 등에 대한 자동 Bean 생성 및 설정ean 생성 및 설정
- templateResolver, templateEngine, viewResolver 등에 대한 자동 Bean 생성 및 설정ean 생성 및 설정
🥠 Namespace 선언
- Thymeleaf에서 정의된 모든 태그 및 속성 이름 앞에 "th:" 접두사 적용
- th:text 속성
- 주어진 식의 값을 엘리먼트의 content에 출력
- 일반 텍스트를 삽입하고 HTML 태그를 이스케이프한다
- 화면에
<b>Bold Text</b> with <i>Italic</i>가 그대로 표시됩니다.
- th:utext 속성
- 변환을 실행하지 않고 그대로 출력 (HTML tag 출력 시 사용)
- HTML 태그를 포함한 텍스트를 삽입하며 이스케이프하지 않는다
- 화면에 실제로 Bold Text with Italic가 굵은 글씨와 기울임 글씨로 표시됨
🥠 Expressions
1) 변수 식(variable expr): ${...}
<body>
<p>아이디: <span th:text="${member.id}">ID</span></p>
<p>이메일: <span th:text="${member.email}">Email</span></p>
<p>이름: <span th:text="${member.name}">Name</span></p>
11
<p>가입일: <span th:text="${member.regDateTime}">RegDateTime</span>
</body>- Controller에서 생성된 model attribute의 이름을 이용해서 객체에 접근 가능
2) 선택 변수 식(selection variable expr): *{...}
<div th:object="${member}">
<p>아이디: <span th:text="*{id}">ID</span></p>
<p>이메일: <span th:text="*{email}">Email</span></p>
// ${member.id}와 동일
// ${member.email}과 동일
<p>이름: <span th:text="${member.name}">Name</span></p> // 변수 식도 사용 가능
</div>- 선택된 특정 객체에 대해 실행됨
- 선택 객체: th:object 속성으로 주어진 식의 결과
- 선택된 객체가 없을 경우 전체 context에 대해 실행됨 (${...}와 동일)
3) 메시지 식(message expr): #{...}
Message parameter 이용
- register/step3.html
<body>
<p th:text="#{register.done( ${regReq.name}, ${regReq.email} )}">이름, 이메일 포함 출력</p>
</body>- messages.properties
register.done={0}님 ({1}), 회원 가입을 완료했습니다.- 최종 결과 html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Registration Complete</title>
</head>
<body>
<p>John Doe님 (john.doe@example.com), 회원 가입을 완료했습니다.</p>
</body>
</html>
4) Link URL 식: @{...}
주어진 식에 대한 URL 문자열 생성
- 절대 경로식 또는 상대 경로식 지정
//절대경로
<a href="#" th:href="@{http://localhost:8080/mystore/order/list}">view</a>
//'http://localhost:8080/mystore/order/list' 생성
//상대경로
<a href="#" th:href="@{/order/list}">view</a> // context-relative URL (JSTL의<c:url>과 동일)
//'http://localhost:8080/mystore/order/list' 생성(contextpath가/mystore일때)- Request parameter 포함 가능
➡️ path variable 이용 예시
<a href="#" th:href="@{/order/details(orderId=${o.id})}">view</a>
//'http://localhost:8080/mystore/order/details?orderId=3’생성 (${o.id}가 3일 때)
<a href=“#” th:href="@{/order/{orderId}/details(orderId=${o.id})}">view</a>
//‘http://localhost:8080/mystore/order/3/details’생성 (${o.id}가 3일 때)
➡️ query string 이용 예시
<a th:href="@{/search(query=${product.name})}">Search Related Products</a>