타임리프는 템플릿 엔진이다. 그럼 템플릿 엔진이란? 스프링 서버에서 데이터를 받아 우리가 보는 웹페이지, HTML상에 그 데이터를 넣어 보여주는 도구이다. 따라서 HTML과 함께 템플릿 엔진을 위한 문법을 살짝 섞어서 사용해야 한다.
타임리프 표현식
표현식
설명
${...}
변수의 값 표현식
#{...}
속성 파일 값 표현식
@{...}
URL 표현식
*{...}
선택한 변수의 표현식. th:object에서 선택한 객체에 접근
타임리프 문법
표현식
설명
예제
th:text
텍스트를 표현
th:text=${person.name}
th:each
컬렉션을 반복할 때 사용
th:each="person:${persons}"
th:if
조건이 true인 때만 표시
th:if="${person.age}>=20"
th:unless
조건이 false인 때만 표시
th:unless="${person.age}>=20"
th:href
이동 경로
th:href="@{/person(id=${person.id})}"
th:with
변수값으로 지정
th:with="name=${person.name}"
th:obejct
선택한 객체로 지정
th:object="${person}"
타임리프 사용을 위해 의존성 추가
build.gradle 파일에 의존성을 추가 -> 새로고침
// 프로젝트를 개발하며 필요한 기능의 의존성을 입력, 라이브러리 추가
dependencies {
.....
// 타임리프 사용
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
}
타임리프 맛보기 컨트롤러
문법 익히기 용으로 컨트롤러를 하나 임시로 만들어 보자. /thymeleaf/example GET 요청이 오면 특정 테이터를 view(=HTML)로 넘겨주는 모델 객체에 추가하는 컨트롤러 메서드를 작성할 것임.
controller 패키지에 ExampleController.java 파일 생성 후 코드 작성
package me.jinsoyeong.springbootdeveloper.controller;
import lombok.Getter;
import lombok.Setter;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import java.time.LocalDate;
import java.util.List;
// 컨트롤러임을 명시하는 에너테이션
@Controller
public class ExampleController {
/*
* 메서드:
* param: Model model(뷰로 데이터를 넘겨주는 모델 객체, 따로 객체 생성없이 스프링이 알아서 만들어 줌)
*
* */
@GetMapping("/thymeleaf/example")
public String thymeleafExample(Model model) {
// person 객체 생성
Person examplePerson = new Person();
examplePerson.setId(1L);
examplePerson.setName("권지용");
examplePerson.setAge(18);
examplePerson.setHobbies(List.of("운동", "독서"));
// Person 객체 저장
// 모델에 값을 저장하는데, person 에는 사람 정보를, today 키에는 현재 날짜를 저장함
model.addAttribute("person", examplePerson);
model.addAttribute("today", LocalDate.now());
// 위에서 @Controller 애너테이션을 붙여줬으니 view 의 이름을 반환한다.
// 즉, 스프링 부트는 컨트롤러의 애너테이션을 보고 "반환값(뷰 이름)과 같은 이름을 가진 view 파일을 찾게 됨
// -> resource/templates 에서 example.html 을 찾은 다음 웹 브라우저에서 해당 파일을 보여주게 됨
return "example";
}
@Getter
@Setter
class Person {
private Long id;
private String name;
private int age;
private List<String> hobbies;
}
}
(컨트롤러) -> 컨트롤러에서 데이터 설정 -> "person" -- id:1, name: "홍길동", age: 11, hobbies:["운동", "독서"], "today" 오늘날짜 -> 뷰에서 사용할 수 있도록 데이터 전달 -> 뷰
- 모델에는 "person", "today" 라는 이름의 키를 가진 데이터가 들어있을 것임. - 컨트롤러는 이렇게 모델을 통해 데이터를 설정하고, 모델은 뷰로 이 데이터를 전달해 키에 맞는 데이터를 뷰에서 조회할 수 있게 해준다. - 모델은 컨트롤러와 뷰의 중간다리 역할!
resources/templates 디렉터리에 example.html 파일 생성 후 코드 작성
1. ${#temporals.format(today, 'yyyy-MM-dd')} #temporals → Thymeleaf의 날짜 및 시간 관련 유틸리티 객체 today → 컨트롤러에서 전달된 날짜(LocalDate 또는 LocalDateTime 객체)'yyyy-MM-dd' → 날짜를 연-월-일 형식(예: 2025-04-01)으로 문자열로 변환th:text="..."<p> 태그 안의 내용을 th:text 속성을 사용해 동적으로 설정즉, today 값을 yyyy-MM-dd 형식으로 출력
