Thymeleaf template(HTML 확장자)
Thymeleaf는 Spring Boot에서 View(HTML)를 처리하는 기본 방식 중 하나이다. resources/templates 폴더 안에 페이지의 틀을 저장하는 형식을 가지고 있다.
Jsp처럼 prefix/suffix 설정 및 webapp/WEB-INF/views 폴더를 생성할 필요가 없으며, controller에서 데이터를 전송하는 방식과 HTML 태그 형식은 동일하다.
Thymeleaf의 데이터 출력
- 기본적인 데이터의 출력은 EL 형식을 사용 => ${ ... }
- 링크(url) : @{link}, a 태그, action
- 객체의 필드(멤버 변수) : *{field}
| Jsp에서 | HTML에서 | |
| Session에 저장된 데이터 출력 | let v = [[${session.name}]]; | th:text="${session.name}" |
| RedirectAttributes에 저장된 데이터 출력 | let v = [[$name]]; | th:text="${name}" |
| 요소의 내용 부분에 데이터를 출력할 때 |
th:text | <span th:text="${data}"><span> |
| [[ ... ]] | <span>[[${data}]]</span> | |
| 요소의 내용 부분에 데이터를 html로 출력할 때 |
th:utext | <span th:utext="${data}"><span> |
| [( ... )] | <span>[(${data})]</span> |
Thymeleaf 태그 및 속성
태그)
th:block : 제어문의 영역을 설정할 때 사용하는 태그
주요 속성)
| th:text / th:utext | 요소에 서버에서 전송된 데이터를 출력 | 자바스크립트 지정 <script th:inline="javascript"> |
| th:inline | th:text 대신 사용 => ([[ ... ]])로 문자열 데이터 출력 | |
| th:href | 링크 연결 속성(a 태그에서 사용) 파라미터를 보내는 링크 => th:href="@{url(name=value)}" 일반 html => <a href="test?d1=100&d2=200">전달</a> Thymeleaf => <a th:href="@{test(d1=100, d2=200)}">전달</a> |
|
| th:action | form 태그의 action 속성과 같음 | |
th:block을 활용한 제어 속성)
| th:each | for문에 해당하는 속성 for(변수 : 목록) 형식으로 처리 <th:block th:each="변수:${목록}"> ... </th:block> |
| th:if / th:unless | if / else문에 해당하는 속성 |
| th:switch / th:case | switch / case에 해당하는 속성 |
| List(목록)의 null 체크 | &{#list.isEmpty(목록))} |
| 객체(Dto)의 null 체크 | ${#object.isNull(dto)} |
사용 예제
- 첫 번째 페이지
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Thymeleaf Home</title>
</head>
<body>
<h1>Thymeleaf 첫 페이지</h1>
<p th:text="${d1}"></p>
<p>[[${d2}]]</p>
<p th:utext="${d1}"></p>
<p>[(${b1})]</p>
<hr>
<h2>인적 정보</h2>
<p>이름 : <span th:text="${pe.p_name}"></span></p>
<p>나이 : [[${pe.p_age}]]</p>
<p>전화번호 : [[${pe.getP_phone()}]]</p>
<hr>
<a th:href="@{second}">[두 번째 페이지]</a>
</body>
</html>
- 두 번째 페이지
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Second</title>
<script th:inline="javascript">
let m = [[${msg}]];
if (m != null) {
alert(m);
}
</script>
</head>
<body>
<h1>Thymeleaf 두 번째 페이지</h1>
<p th:text="${session.id} + '님 반가워요!'"></p>
<p th:text="'Hello world'"></p>
<th:block th:each="item,status:${pList}">
<ul>
<th:block th:if="${status.odd}">
<li th:text="'이름 : ' + ${item.p_name}"></li>
<li th:text="'나이 : ' + ${item.p_age}"></li>
<li th:text="'전화번호 : ' + ${item.p_phone}"></li>
</th:block>
</ul>
<th:block th:unless="${status.odd}">
<b>
<ul>
<th:block th:if="${status.odd}">
<li th:text="'이름 : ' + ${item.p_name}"></li>
<li th:text="'나이 : ' + ${item.p_age}"></li>
<li th:text="'전화번호 : ' + ${item.p_phone}"></li>
</th:block>
</ul>
</b>
</th:block>
</th:block>
</body>
</html>
