# **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
org.springframework.boot
spring-boot-starter-thymeleaf
```
### **📌 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
Thymeleaf Example
Default Message
```
#### **📌 실행 결과 (`http://localhost:8080/` 요청)**
```html
Welcome to Thymeleaf!
```
**설명:**
- `th:text="${message}"` → `message` 값이 `"Welcome to Thymeleaf!"`로 변경됨.
- **템플릿 엔진이 동적으로 HTML을 생성**하여 클라이언트에 응답.
---
## **4. 변수 출력 및 표현식**
### **📌 1) 기본 표현식 (`th:text`)**
```html
Default Name
```
- **`${변수명}`** → `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
Default Name
Default Age
```
**📌 실행 결과 (`/user` 요청)**
```html
Alice
25
```
---
## **5. 반복문 (`th:each`)**
### **📌 1) 리스트 반복 (`th:each`)**
```java
@GetMapping("/users")
public String users(Model model) {
List userList = Arrays.asList(
new User("Alice", 25),
new User("Bob", 30),
new User("Charlie", 22)
);
model.addAttribute("users", userList);
return "users";
}
```
```html
```
#### **📌 실행 결과 (`/users` 요청)**
```html
- Alice - 25
- Bob - 30
- Charlie - 22
```
---
## **6. 조건문 (`th:if`, `th:unless`)**
### **📌 1) 값이 있을 때만 표시 (`th:if`)**
```html
Adult
```
### **📌 2) 값이 없을 때 표시 (`th:unless`)**
```html
Minor
```
---
## **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
```
### **📌 3) 결과 페이지 (result.html)**
```html
Name:
Age:
```
---
## **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 파일을 유지하면서 동적 데이터를 추가할 수 있어 유지보수성이 뛰어납니다.**