반응형
Spring Boot와 Thymeleaf는 웹 애플리케이션을 만들 때 자주 사용되는 조합입니다. Thymeleaf는 Java 기반의 서버 사이드 템플릿 엔진으로, HTML을 동적으로 생성할 수 있게 해줍니다.
1. Thymeleaf 개요
- 서버 사이드 템플릿 엔진: HTML 파일 내에서 데이터를 동적으로 교체하고, 조건부 로직 및 반복문 등을 사용할 수 있습니다.
- HTML5 호환 : Thymeleaf는 HTML5 문법을 준수하며, 브라우저에서 직접 열어도 유효한 HTML로 보입니다.
- Spring 통합 : Spring MVC와 자연스럽게 통합되어, 모델 데이터를 쉽게 템플릿에 전달할 수 있습니다.
2. 주요 기능
- 변수 표현 : ${} 문법을 사용하여 모델 데이터를 표현합니다.
- 조건부 평가 : th:if, th:unless 등을 사용하여 조건에 따라 요소를 렌더링합니다.
- 반복문 : th:each를 사용하여 컬렉션을 반복할 수 있습니다.
- 속성 처리 : th:* 속성으로 HTML 요소의 속성을 동적으로 설정할 수 있습니다.
3. 자주 사용되는 문법 및 속성
3.1. 데이터 표현
- 변수 표현 : ${message}는 모델에 있는 message 변수를 표현합니다.
<p th:text="${message}"></p>
- 문자열 표현 :
<p th:text="'Hello, ' + ${name}"></p>
3.2. 조건부 로직
- if 조건문 :
<div th:if="${user != null}">
<p>Welcome, <span th:text="${user.name}">User</span>!</p>
</div>- unless 조건문 :
<div th:unless="${isAuthenticated}">
<p>Please log in.</p>
</div>
3.3. 반복문
- 리스트 반복
<ul>
<li th:each="item : ${itemList}" th:text="${item}"></li>
</ul>
- 인덱스 사용
<ul>
<li th:each="item, iterStat : ${itemList}">
<span th:text="${iterStat.index}"></span>: <span th:text="${item}"></span>
</li>
</ul>
3.4. 속성 처리
- 속성 설정 :
<a th:href="@{/path/to/resource(id=${item.id})}">Link</a>- CSS 클래스 추가 :
<div th:class="${isActive ? 'active' : 'inactive'}"></div>
3.5. 템플릿 레이아웃
- 레이아웃 사용
: Thymeleaf Layout Dialect를 사용하여 레이아웃을 설정할 수 있습니다.
<div layout:fragment="content">
<h1>Content goes here</h1>
</div>
- 레이아웃 적용
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<title>My Page</title>
</head>
<body layout:decorate="~{layout/layout}">
<div layout:fragment="content">
<!-- Page content -->
</div>
</body>
</html>
3.6. 폼 처리
- 폼 바인딩 :
<form th:action="@{/submit}" th:object="${user}" method="post">
<input type="text" th:field="*{username}" />
<input type="password" th:field="*{password}" />
<button type="submit">Submit</button>
</form>- 에러 메세지 표시 :
<span th:if="${#fields.hasErrors('username')}" th:errors="*{username}"></span>
4. 자주 사용하는 유틸리티
- 문자열 처리 :
--> #strings.capitalize(): 문자열의 첫 글자를 대문자로 변환합니다.
--> #dates.format(...): 날짜 형식을 변경합니다. - 컬렉션 처리 :
--> #lists.size(...): 리스트의 크기를 반환합니다.
--> #lists.contains(...): 리스트에 특정 요소가 포함되어 있는지 확인합니다.
5. 기타 유용한 기능
- 주석 :
<!-- This is a comment -->- 파일 포함 :
<th:block th:replace="fragments/header :: headerFragment"></th:block>반응형
'IT개발 > Spring Boot' 카테고리의 다른 글
| Spring Boot JPA Hibernate란?(자바/백엔드/개발/프로그래밍/스프링) (1) | 2024.11.25 |
|---|---|
| Spring Boot JPA(Java Persistence API)란(java/backend/자바/스프링부트/데이터/서버) (0) | 2024.11.24 |
| 스프링 부트(Spring Boot) Thymeleaf 반복문(백엔드 개발/Java/제어문) (0) | 2024.11.16 |
| 스프링 부트(Spring Boot)에서 파일 생성시 web(html, jsp 등) 관련 파일 항목이 없을때 해결방법 (2) | 2024.11.13 |
| 맥북 스프링 부트 세팅 - STS4(Spring Boot/Spring/백엔드개발/Java/자바/Backend) (4) | 2024.11.09 |
댓글