[Thymeleaf] Thymeleaf의 기본 문법 정리
Thymeleaf 문법의 기본적인 특징은 html태그 안에 th문법을 추가하는 형태이다.
표현식: <div th:[속성]=”서버에서 받는 값 및 조건식”/>
(태그는 div가 아니여도 html에서 지원하는 태그면 상관없다.)
그중 대표적인 몇 개만 정리해보았다.
1. th: text
태그 안의 텍스트를 서버에서 전달 받은 값에 따라 표현하고자 할 때 사용된다.
1.1 사용예시
<span th:text="${hello}">message</span>
(이 경우 서버에서 hello라는 변수가 있을 경우 message의 자리를 변수값으로 대체하게 된다.)
2. th:utext
변수에서 받은 값에서 html태그가 있다면 태그값을 반영해서 표시해준다/
(th:text와의 차이는 사용 예시 참고)
2.1사용 예시
서버에서 받은 hello값이 <p>Hello World!</p>일 때
- th:text의 경우
[Thymeleaf 템플릿 내의 코드]
<span th:text="${hello}">message</span>
[실제 웹브라우저에 표시되는 내용]
<p>Hello World!</p>
(태그값을 인식하지 않고 그대로 텍스트로 인식해서 출력한다.)
- th:utext의 경우
[Thymeleaf 템플릿 내의 코드]
<span th:utext="${hello}">message</span>
[실제 웹브라우저에 표시되는 내용]
Hello World!
(태그에서 지정한 대로 값이 표시된다.)
3. th:value
엘리먼트들의 value값을 지정할 수 있다.
3.1사용 예시
<button th:value=”${hello}”/>
(이런식으로 value값을 서버 값에따라 바꿔줄 수 있다.)
4. th:with
변수 값을 지정해서 사용할 수 있다.
4.1 사용 예시
<div th:with=”temp=${hello}” th:text=”${temp}”>
5. th:switch
Switch-case문이 필요할 때 사용한다.
th:case에서 case문을 다루고 *로 case문에서 다루지 않은 모든 경우가 처리된다.
(java switch문의 default역할)
5.1 사용 예시
<div th:switch="${hello}">
<p th:case="'admin'">User is an administrator
<p th:case="#{roles.manager}">User is a manager
<p th:case="*">User is a manager
</div>
6. th:if
조건문이 필요할 때 사용한다. else문이 필요한 경우에는 th:unless를 사용한다.
1.1. 사용 예시
<p th:if="${hello}=='web'" th:text="${hello}"></p>
<p th:unless="unless 입니다."></p>
7 th:each
반복문이 필요한 경우에 사용한다.
리스트와 같은 collection 자료형을 서버에서 넘겨주면 그에 맞춰 반복적인 작업이 이루어질 때 사용한다.
먼저 "반복문 돌릴 객체의 변수명": "리스트 변수 명" (예: th:each="item:${itemList}")와 같이 적어 반복문을 명시하고
반복적인 작업이 필요한 곳에서 "객체명.객체 내 지역변수 명"(예: th:text="${item.itemName}")
이런식으로 데이터를 사용하면 된다.
7.1 사용 예시
<div class="btn-group" th:each="item:${itemList}">
<button class="btn btn-secondary" th:value="${item.landmarkSn}" th:text="${item.landmarkName}"
style="margin: 5px;"></button>
</div>
위의 내용에 대한 예시 코드를 모아서 정리해보면 다음과 같다.
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h6>1. th:text 예시</h6>
<span th:text="${hello}">message</span>
<span>님 안녕하세요!</span>
<br>
<h6>2. th:utext 예시</h6>
<th:block th:utext="${hello}">message</th:block>
<br>
<h6>3. th:value 예시</h6>
<input th:value="${hello}" style="width: 100px; height:30px;">
<h6>4. th:with 예시</h6>
<div th:with="temp=${hello}" th:text="${temp}"></div>
<br>
<h6>5. th:switch 예시</h6>
<div th:switch="${hello}">
<p th:case="'admin'">admin
<p th:case="#{hello}=='user'">User
<p th:case="*">*입니다
</div>
<br>
<h6>6. th:if 예시</h6>
<p th:if="${hello}=='web'" th:text="${hello}"></p>
<p th:unless="${true}" th:text="${hello}">
unless 입니다
</p>
<br>
<h6>7. th:each 예시</h6>
<div class="btn-group" th:each="item:${itemList}">
<button class="btn btn-secondary" th:value="${item.landmarkSn}" th:text="${item.landmarkName}"
style="margin: 5px;"></button>
</div>
<br>
</body>
</html>
위의 코드를 실행해본 결과이다.
'Backend > Thymeleaf' 카테고리의 다른 글
| Thymeleaf를 이용한 웹 개발 소개 및 기능 (0) | 2023.02.27 |
|---|---|
| [Thymeleaf]게시판 Table에서 Paging 적용하기(SpringBoot) (2) | 2020.08.04 |
| [Thymeleaf]ajax 사용법 및 예제(SpringBoot) (7) | 2020.07.23 |
| [Thymeleaf]Layout을 이용해 화면 구성하기(SpringBoot) (0) | 2020.07.22 |
| [Thymeleaf] SpringBoot에 Thymeleaf 적용하기 (1) | 2020.07.17 |
