Thymeleaf란?
Thymeleaf는 템플릿 엔진의 일종으로 html 태그에 속성을 추가해 페이지에 동적으로 값을 추가하거나 처리할 수 있습니다.
JavaScript를 사용하지 않고 html에서 처리할 수 있는 유용한 기능들이 많이 있습니다.
Thymeleaf의 기본 문법
Thymeleaf를 사용하려면 html 파일의 상단에 다음과 같이 선언해주면 됩니다.
<html xmlns:th="http://www.thymeleaf.org">태그에 값 세팅
<p th:text="${item}"></p>문자열 합치기
<div th:text="'Hello, ' + ${name} + '!'"></div>
<div th:text="|Hello, ${name}!|"></div>value 값 세팅
<p th:value="${name}"></p>반복 출력
<tr th:each="item : ${items}">
<td th:text="${item.id}"></td>
<td th:text="${item.name}"></td>
<td th:text="${item.price}"></td>
</tr>링크 url
<!-- 기본적인 링크 삽입 -->
<a th:href="@{/index}"></a>
<!-- 링크 안에 파라미터 사용할 때 -->
<a th:href="@{'/member/' + ${member.id} + '/update'}">if문
<a th:if="${not #lists.isEmpty(prod.comments)}">view</a>if-else문
<span th:if="${sports['count'] != '1'}">
<span th:unless="${sports['count'] != '1'}">JavaScript 함수를 호출할 때
<!-- 변수 1개 -->
<button th:onclick="test([[${item['id']}]]);"></button>
<!-- 변수 여러개 -->
<button th:onclick="test([[${item['id']}]], [[${item['name']}]]);"></button>객체에 값이 비어있는지 확인
<li th:if="${#lists.isEmpty(item)}">반복문 + 상태
<div th:each="user, userStat : ${users}">
<p th:text="${userStat.index}">현재 인덱스 (0부터 시작)</p>
<p th:text="${userStat.count}">현재 인덱스 (1부터 시작)</p>
<p th:text="${userStat.size}">총 요소 수</p>
<p th:text="${userStat.current}">현재 요소</p>
<p th:text="${userStat.even}">현재 반복이 짝수인지 확인</p>
<p th:text="${userStat.odd}">현재 반복이 홀수인지 확인</p>
<p th:text="${userStat.first}">현재 반복이 첫번째인지 확인</p>
<p th:text="${userStat.last}">현재 반복이 마지막인지 확인</p>
</div>문자열 자르기
<tr th:each="sports : ${#strings.arraySplit(str, ',')}">
<td th:text="${sports}"></td>
</tr>태그 삭제
<li th:remove="tag"></li>