Thymeleaf
기술노트
Admin (토론 | 기여)님의 2025년 7월 13일 (일) 08:45 판 (새 문서: = 🌿 Thymeleaf란? = '''Thymeleaf(타임리프)'''는 HTML을 서버에서 동적으로 생성할 수 있도록 도와주는 '''템플릿 엔진'''입니다. Spring Boot와 잘 연동되며, JSP의 대체재로 가장 많이 사용됩니다. → HTML 문서 안에 `th:`로 시작하는 속성을 추가해서 → 서버 데이터를 출력하거나 반복문, 조건문 등을 처리할 수 있습니다. ---- = ✨ 왜 사용하는가? = 기존 JSP는 HTML과 Java 코...)
🌿 Thymeleaf란?
Thymeleaf(타임리프)는 HTML을 서버에서 동적으로 생성할 수 있도록 도와주는 템플릿 엔진입니다. Spring Boot와 잘 연동되며, JSP의 대체재로 가장 많이 사용됩니다.
→ HTML 문서 안에 `th:`로 시작하는 속성을 추가해서 → 서버 데이터를 출력하거나 반복문, 조건문 등을 처리할 수 있습니다.
✨ 왜 사용하는가?
기존 JSP는 HTML과 Java 코드가 섞여 있어 보기 어려웠습니다. Thymeleaf는 HTML 문서를 그대로 유지하면서, 필요한 부분만 서버에서 바꿔치기(rendering)하기 때문에
- 디자이너도 보기 쉬움
- 웹 브라우저로 열어도 정상 HTML처럼 보임
- Java 변수, 조건, 반복 등을 쉽게 적용 가능
✅ 아주 쉬운 예제
<input type="text" value="기본값" th:value="${item}">
- 서버에서 `item`이라는 값이 있으면 → `value="item의 값"` 으로 변경됨
- 값이 없으면 → `value="기본값"`이 그대로 유지됨
🔎 타임리프는 `th:속성`이 있는 경우, 그 속성이 기존 속성을 덮어쓴다고 이해하면 됩니다. 렌더링된 HTML에서는 `th:value` 같은 속성은 사라지고, **최종 결과만 남습니다.**
🧠 작동 방식 요약
1. 컨트롤러에서 모델(Model)에 데이터를 담아 HTML로 전달 2. HTML 파일에서 `th:text`, `th:value` 등을 사용해 변수 출력 3. 서버에서 렌더링 후 `th:` 속성은 제거되고, 결과 HTML만 브라우저에 전달됨 4. 브라우저에서는 일반 HTML처럼 보임 (`th:` 속성은 보이지 않음)
🧩 주요 문법 요약표
| 표현 | 설명 | 예제 |
|---|---|---|
th:text |
태그 내용 변경 | <p th:text="${name}">
|
th:value |
input value 설정 | <input th:value="${name}">
|
th:href |
링크 주소 설정 | <a th:href="@{/home}">
|
th:each |
반복 처리 | <li th:each="i : ${items}">
|
th:if / th:unless |
조건 처리 | <div th:if="${isAdmin}">
|
${...} |
변수 참조 | th:text="${user.name}"
|
@{...} |
URL 링크 표현식 | th:href="@{/item/{id}(id=${item.id})}"
|
⚙️ Spring Boot 설정 방법
Gradle
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
application.properties 기본 설정
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
HTML 파일 상단에 네임스페이스를 반드시 선언:
<html xmlns:th="http://www.thymeleaf.org">
🧪 실전 예제: 상품 목록 출력
<table>
<tr th:each="item : ${items}">
<td th:text="${item.name}">상품명</td>
<td th:text="${item.price}">가격</td>
</tr>
</table>
