✅ 타임리프(Thymeleaf)란?
: 자바 기반 템플린 엔진.
- HTML 및 템플릿 엔진 문법 필요.
- 템플릿 엔진마다 구조는 비슷하나, 문법이 조금씩 다름.
- 대표적인 예시 : 타임리프, JPS, 프리마커 (스프링은 타임리프를 권장함)
📌 템플린 엔진
: 서버에서 데이터를 받아 웹페이지 (즉, HTML) 상에 데이터를 넣어 보여주는 도구.
→ 컨트롤러가 전달하는 데이터를 이용해, 동적으로 화면을 구성할 수 있게 해주는 도구.
✅ 타임리프 표현식/문법
📌 자주 사용하는 표현식
: 서버로부터 전달받은 데이터를 사용자들이 볼수 있는 뷰로 만들기위해 사용되는 표현식만 소개.
| 표현식 | 설명 |
| ${ ... } | 변수값 표현식 |
| #{ ... } | 속성파일 표현식 |
| @{ ... } | URL 표현식 |
| *{ ... } | '변수 표현식.th:object' 에서 선택한 객체에 접근 |
📌 자주사용하는 문법
| 문법 | 설명 | 예시 |
| th:text | 텍스트 표현할때 사용 | th:text=${person.name} |
| th:each | 컬렉션 반복할때 사용 | th:each="person:${person}" |
| th:if | true(조건)일 때만 표시 | th:if="${person.age}>=20" |
| th:unless | false(조건)일 때만 표시 | th:unless="${person.age}<20" |
| th:href | 이동 경로 | th"href="@{/persons(id=${person.name})}" |
| th:with | 변수값으로 지정 | th:with="name=${person.name}" |
| th:object | 선택한 객체로 지정 | th:object="${person}" |
✅ 의존성(디펜던시) 추가
dependencies {
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
}
✅ 사용법 알아보기
1. 컨트롤러 작성하기
@Controller // 컨트롤러
public class ExampleController {
@GetMapping("/thymeleaf/example")
public String thymeleafExample (Model model) { // Model : 뷰(HTML)로 데이터를 넘겨주는 객체
Person examplePerson = new Person();
examplePerson.setId(1L);
examplePerson.setName("홍길동");
examplePerson.setAge(11);
ecamplePerson.setHobbies(List.of("운동", "독서"));
model.addAttribute("Person", examplePerson); // addAttribute() : model에 값 저장 - person(키)에 사람 정보 저장
model.addAttribute("today", LocalDate.now()); // : model에 값 저장 - today(키)에 날짜 정보 저장
return "example"; // example(뷰 이름) 반환 : 반환하는 값의 이름을 가진 뷰 파일을 찾아라 → example.html 뷰 조회
}
@Setter
@Getter
class Person {
private Long id;
private String name;
private int age;
private List<String> hobbites;
}
}📌 모델의 역할
:컨트롤러와 뷰의 중간다리 역할
- 컨트롤러 : 모델을 통해 데이터 설정.
- 뷰 : 모델로부터 데이터를 전송받아 키("person", "today")에 맞는 데이터를 뷰에서 조회.
2. 뷰 작성하기
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Tile</title>
</head>
<body>
<h1>라임리프 익히기</h1>
<!-- LocalDate를 yyyy-MM-dd 포맷으로 변경 -->
<p th:text="${#temporals.format(today, 'yyyy-MM-dd')"}></p> // temporals.format() : LocalDate 타입인 오늘 날짜 → String ('yyyy-MM-dd') 형식으로 포맷팅
<!-- person을 선택한 객체로 지정 -->
<div th:object="${person}"> // th:object : 키가 person 인 데이터를 하위 태그에 저장
<p th:text=:"|이름 : *{name}:|"></p> // 그러면, 하위태그에서는 *{}를 통해 부모태그에 적용한 객체 값에 접근 가능
<p th:text=:"|나이 : *{age}:|"></p> // th:text : "이름:" + person 객체의 name/age (홍길동/11) 이어붙임
<p>취미</p>
<!-- hobbies 개수만큼 반복-->
<ul th:each="hobby : *{hobbies}"> // th:each : hobbies 개수만큼 반복하는 반복자.
<li th:text="${hobby}"></li>
<!-- 반복 대상이 운동이라면 '대표 취미'라는 표시 추가 -->
<span th:if="${hobby == '운동'}">(대표 취미)</span>
</ul>
<div>
<!-- 1번 블로그 글을 보러 이동 -->
<a th:href="@{/api/articles/{id}(id=${person.id})}">글 보기</a>
</body>
</html>
3. 뷰 테스트
http://localhost:8080/thymeleaf/example 에 접속 후, 결과 확인.
참고자료 : 스프링 부트 3 백엔드 개발자 되기: 자바 편
https://product.kyobobook.co.kr/detail/S000201766024
스프링 부트 3 백엔드 개발자 되기: 자바 편 | 신선영 - 교보문고
스프링 부트 3 백엔드 개발자 되기: 자바 편 | ★ 자바 백엔드 개발자가 되고 싶다면 ★ 자바 언어 입문 그다음에 꼭 보세요실력을 갖춘 개발자로 성장하려면 시작이 중요합니다. 그래서 이 책은
product.kyobobook.co.kr
