✅ Thymeleaf
화면을 동적으로 만들기 위한 템플릿 엔진이다.
요청이 올 때마다 서버에서 새로운 html 페이지를 만들어 주기 때문에 서버 사이드 렌더링 방식이라고 한다.
✔️ 장점
- 확장자명이 .html이다.
- JSP의 경우 서버 사이드 렌더링을 하지 않으면 정상적인 화면 출력을 볼 수 없지만 Thymeleaf의 경우 정상적인 화면을 볼 수 있다.
✔️ build.gradle
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'✔️ html 문서에 네임스페이스 추가
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1 th:text="${name}">Name</h1>
</body>
</html>✔️ 기본 문법
-
th:text="${}"
컨트롤러에서 전달받은 데이터에 접근할 수 있다. -
th:href="@{}"
이동하고 싶은 페이지의 링크를 입력해준다. -
th:with="${}"
값을 재정의 할 수 있다. 즉, 새로운 변수값을 생성할 수 있다. -
th:value="${}"
input의 value에 값을 넣을 수 있다. 여러개인 경우 +를 사용하여 연결한다.
✔️ form 태그에서 사용하는 문법
-
th:action="@{}"
form태그에서 요청을 보내는 경로를 입력한다. -
th:object="${}"
form태그에서 데이터를 submit할 때 지정한 객체에 값을 담아 넘긴다.
객체는 DTO클래스 객체라고 생각하면 된다.
이때 th:field속성과 함께 사용한다. -
th:field="*{}"
html태그에 멤버 변수를 매핑할 수 있다.
object와 field는 컨트롤러에서 특정 클래스의 객체를 전달 받은 경우에만 사용 가능하다.
✔️ 조건문
- th:if="${}" ,th:unless=="${}"
if와 else를 뜻한다. th:unless는 th:if에 들어가는 조건과 동일한 조건을 지정해야한다.
<span th:if="${item.itemSellStatus} == 'SELL'}">
판매중
</span>
<span th:unless="${item.itemSellStatus} == 'SELL'}">
품절
</span>- th:each="변수: ${list}"
for문을 담당하는 속성이다.
<th:block th:each="item, status: ${items.getContent()}">
</th:block>
하루하루 차근차근🌱