222 lines
6.2 KiB
Markdown
222 lines
6.2 KiB
Markdown
# **Spring Boot의 뷰 렌더링과 Thymeleaf 템플릿 사용법**
|
|
|
|
Spring Boot에서는 **Thymeleaf**를 사용하여 **HTML 기반의 동적 웹 페이지를 렌더링**할 수 있습니다.
|
|
이 글에서는 **뷰 렌더링 개념, Thymeleaf 설정, 기본 문법, 폼 처리, 반복문 및 조건문 활용** 등을 예제와 함께 설명합니다.
|
|
|
|
---
|
|
|
|
## **1. 뷰(View) 렌더링이란?**
|
|
|
|
- 클라이언트가 요청을 보내면, **컨트롤러가 요청을 처리하고 데이터를 모델(Model)에 담아 뷰(View)로 전달**합니다.
|
|
- 뷰(View)는 **HTML 페이지**로, Thymeleaf 같은 템플릿 엔진을 사용하면 **서버에서 동적으로 HTML을 생성**할 수 있습니다.
|
|
- Spring Boot에서 대표적인 뷰 템플릿 엔진: **Thymeleaf, JSP, FreeMarker** 등이 있지만, **Thymeleaf가 가장 많이 사용됨**.
|
|
|
|
---
|
|
|
|
## **2. Thymeleaf 설정하기**
|
|
|
|
### **📌 1) Thymeleaf 의존성 추가 (Maven)**
|
|
`pom.xml`에 다음과 같이 Thymeleaf 의존성을 추가합니다.
|
|
```xml
|
|
<dependency>
|
|
<groupId>org.springframework.boot</groupId>
|
|
<artifactId>spring-boot-starter-thymeleaf</artifactId>
|
|
</dependency>
|
|
```
|
|
|
|
### **📌 2) Thymeleaf 템플릿 디렉토리**
|
|
Spring Boot는 기본적으로 **`src/main/resources/templates/`** 경로에서 Thymeleaf 템플릿을 찾습니다.
|
|
|
|
```
|
|
src/
|
|
├── main/
|
|
│ ├── java/com.example.demo/
|
|
│ ├── resources/
|
|
│ │ ├── templates/ → Thymeleaf HTML 파일 위치
|
|
│ │ │ ├── index.html
|
|
│ │ │ ├── user.html
|
|
│ │ ├── application.properties
|
|
```
|
|
|
|
---
|
|
|
|
## **3. 기본 컨트롤러와 템플릿 렌더링**
|
|
|
|
### **📌 1) 컨트롤러 작성**
|
|
```java
|
|
@Controller
|
|
public class HomeController {
|
|
|
|
@GetMapping("/")
|
|
public String home(Model model) {
|
|
model.addAttribute("message", "Welcome to Thymeleaf!");
|
|
return "index"; // templates/index.html 파일을 렌더링
|
|
}
|
|
}
|
|
```
|
|
**설명:**
|
|
- `@Controller` → HTML을 반환하는 컨트롤러.
|
|
- `Model` → **뷰로 데이터를 전달하는 객체**.
|
|
- `model.addAttribute("message", "Welcome to Thymeleaf!")` → `message`라는 데이터를 전달.
|
|
- `return "index";` → `templates/index.html` 파일을 렌더링.
|
|
|
|
---
|
|
|
|
### **📌 2) Thymeleaf 템플릿 (index.html)**
|
|
```html
|
|
<!DOCTYPE html>
|
|
<html xmlns:th="http://www.thymeleaf.org">
|
|
<head>
|
|
<title>Thymeleaf Example</title>
|
|
</head>
|
|
<body>
|
|
<h1 th:text="${message}">Default Message</h1>
|
|
</body>
|
|
</html>
|
|
```
|
|
#### **📌 실행 결과 (`http://localhost:8080/` 요청)**
|
|
```html
|
|
<h1>Welcome to Thymeleaf!</h1>
|
|
```
|
|
**설명:**
|
|
- `th:text="${message}"` → `message` 값이 `"Welcome to Thymeleaf!"`로 변경됨.
|
|
- **템플릿 엔진이 동적으로 HTML을 생성**하여 클라이언트에 응답.
|
|
|
|
---
|
|
|
|
## **4. 변수 출력 및 표현식**
|
|
|
|
### **📌 1) 기본 표현식 (`th:text`)**
|
|
```html
|
|
<p th:text="${username}">Default Name</p>
|
|
```
|
|
- **`${변수명}`** → `Model`에서 전달된 변수를 표시.
|
|
|
|
### **📌 2) 객체의 필드 출력 (`th:text`)**
|
|
```java
|
|
class User {
|
|
private String name;
|
|
private int age;
|
|
|
|
public User(String name, int age) { this.name = name; this.age = age; }
|
|
public String getName() { return name; }
|
|
public int getAge() { return age; }
|
|
}
|
|
```
|
|
```java
|
|
@GetMapping("/user")
|
|
public String userProfile(Model model) {
|
|
model.addAttribute("user", new User("Alice", 25));
|
|
return "user";
|
|
}
|
|
```
|
|
```html
|
|
<p th:text="${user.name}">Default Name</p>
|
|
<p th:text="${user.age}">Default Age</p>
|
|
```
|
|
**📌 실행 결과 (`/user` 요청)**
|
|
```html
|
|
<p>Alice</p>
|
|
<p>25</p>
|
|
```
|
|
|
|
---
|
|
|
|
## **5. 반복문 (`th:each`)**
|
|
|
|
### **📌 1) 리스트 반복 (`th:each`)**
|
|
```java
|
|
@GetMapping("/users")
|
|
public String users(Model model) {
|
|
List<User> userList = Arrays.asList(
|
|
new User("Alice", 25),
|
|
new User("Bob", 30),
|
|
new User("Charlie", 22)
|
|
);
|
|
model.addAttribute("users", userList);
|
|
return "users";
|
|
}
|
|
```
|
|
```html
|
|
<ul>
|
|
<li th:each="user : ${users}">
|
|
<span th:text="${user.name}"></span> - <span th:text="${user.age}"></span>
|
|
</li>
|
|
</ul>
|
|
```
|
|
#### **📌 실행 결과 (`/users` 요청)**
|
|
```html
|
|
<ul>
|
|
<li>Alice - 25</li>
|
|
<li>Bob - 30</li>
|
|
<li>Charlie - 22</li>
|
|
</ul>
|
|
```
|
|
|
|
---
|
|
|
|
## **6. 조건문 (`th:if`, `th:unless`)**
|
|
|
|
### **📌 1) 값이 있을 때만 표시 (`th:if`)**
|
|
```html
|
|
<p th:if="${user.age >= 18}">Adult</p>
|
|
```
|
|
|
|
### **📌 2) 값이 없을 때 표시 (`th:unless`)**
|
|
```html
|
|
<p th:unless="${user.age >= 18}">Minor</p>
|
|
```
|
|
|
|
---
|
|
|
|
## **7. 폼 처리 (`@PostMapping`)**
|
|
|
|
### **📌 1) 컨트롤러에서 폼 데이터 받기**
|
|
```java
|
|
@Controller
|
|
@RequestMapping("/form")
|
|
public class FormController {
|
|
|
|
@GetMapping
|
|
public String showForm(Model model) {
|
|
model.addAttribute("user", new User("", 0));
|
|
return "form";
|
|
}
|
|
|
|
@PostMapping
|
|
public String submitForm(@ModelAttribute User user, Model model) {
|
|
model.addAttribute("submittedUser", user);
|
|
return "result";
|
|
}
|
|
}
|
|
```
|
|
|
|
### **📌 2) Thymeleaf 폼 (form.html)**
|
|
```html
|
|
<form action="#" th:action="@{/form}" th:object="${user}" method="post">
|
|
Name: <input type="text" th:field="*{name}" />
|
|
Age: <input type="number" th:field="*{age}" />
|
|
<button type="submit">Submit</button>
|
|
</form>
|
|
```
|
|
|
|
### **📌 3) 결과 페이지 (result.html)**
|
|
```html
|
|
<p>Name: <span th:text="${submittedUser.name}"></span></p>
|
|
<p>Age: <span th:text="${submittedUser.age}"></span></p>
|
|
```
|
|
|
|
---
|
|
|
|
## **8. 정리**
|
|
| 기능 | Thymeleaf 문법 | 설명 |
|
|
|------|--------------|------|
|
|
| **텍스트 출력** | `th:text="${변수}"` | 변수 값을 출력 |
|
|
| **객체 속성 출력** | `th:text="${객체.필드}"` | 객체의 필드 값을 출력 |
|
|
| **반복문** | `th:each="item : ${리스트}"` | 리스트 반복 출력 |
|
|
| **조건문** | `th:if`, `th:unless` | 조건부 렌더링 |
|
|
| **폼 바인딩** | `th:object` + `th:field` | HTML 폼과 객체 바인딩 |
|
|
| **URL 매핑** | `th:action="@{경로}"` | 폼 요청 경로 설정 |
|
|
|
|
Thymeleaf는 **Spring Boot와 강력한 통합을 제공**하여, 동적 웹 페이지를 쉽게 렌더링할 수 있습니다.
|
|
**특히, HTML 파일을 유지하면서 동적 데이터를 추가할 수 있어 유지보수성이 뛰어납니다.** |