반응형
1. 타임리프란?
타임리프는 템플릿 엔진이다.
템플릿 엔진 : 스프링 서버에서 데이터를 받아 우리가 보는 웹 페이지,
즉, HTML 상에 그 데이터를 넣어 보여주는 도구이다.
1-1. 템플릿 엔진?
-- 간단한 템플릿 문법을 위한 예 --
<h1 text=${이름}>
<p text=${나이}>
h1 태그에는 ${이름}이 text attribute로 할당되어 있다.
여기서 ${}로 감싸서 서버에서의 데이터를 넘겨주는 것이 템플릿 문법이다.
서버에서 이름, 나이라는 키로 데이터를 템플릿 엔진에 넘겨주고,
템플릿 엔진은 이를 받아 HTML에 값을 적용한다.
--- 서버에서 보내준 데이터 예 ---
{
이름: "홍길동"
나이: 11
}
서버에서는 위와 같이 주로 json의 형식으로 데이터를 보내준다.
템플릿 엔진은 각각 문법이 미묘하게 다르다.
대표적으로 JSP, 타임리프, 프리마커 등이 있으며,
스프링은 타임리프를 권장하고 있다.
1-2. 타임리프 표현식과 문법
▼ 타임리프 표현식
| 표현식 | 설명 |
| ${...} | 변수의 값 표현식 |
| #{...} | 속성 파일 값 표현식 |
| @{...} | 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="@{/persons(id=${person.id})}" |
| th:with | 변숫값으로 지정 | th:with="name=${person.name}" |
| th:object | 선택한 객체로 접근 | th:object="${person}" |
1-3. 타임리프 사용을 위한 의존성 추가하기
build.gradle
depndencies{
--- 생략 ---
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
}2. 타임리프 실습하기
2-1. 컨트롤러 작성하기
ExampleController.java
@Controller
public class ExampleController{
@GetMapping("/thymeleaf/example")
public String thymeleafExample(Model model){ //뷰로 데이터를 넘겨주는 모델 객체
Person examplePerson = new Person();
examplePerson.setId(1L);
examplePerson.setName("홍길동");
examplePerson.setAge(11);
examplePerson.setHobbies(List.of("운동","독서"));
model.addAttribute("person", examplePerson); // Person 객체 저장
model.addAttribute("today", LocalDate.now());
return "example";
}
@Setter
@Getter
class Person{
private long id;
private String name;
private int age;
private List<String> hobbies;
}
}- Model model
모델 객체는 뷰, 즉, HTML 쪽으로 값을 넘겨주는 객체이다.
모델 객체는 따로 생성할 필요 없이 코드처럼 인자로 선언하기만 하면 스프링이 알아서 만들어준다. - addAttribute()
해당 메서드로 모델에 값을 저장한다.
여기서는 "person"이라는 키에 사람 정보를, "today"라는 키에 날짜 정보를 저장한다 - return "example"
클래스 thymeleafExample() 클래스는 애너테이션 @Controller가 붙었으므로 뷰를 반환한다.
example은 뷰의 이름이다. -> resource/templates의 경로에서 자동으로 찾는다.
모델의 역할
모델에는 "person", "today" 이렇게 두 키를 가진 데이터가 들어있을 것이다.
컨트롤러는 이렇게 모델을 통해 데이터를 설정하고,
모델은 뷰로 이 데이터를 전달해 키에 맞는 데이터를 뷰에서 조회할 수 있게 한다.
모델은 컨트롤러와 뷰의 중간다리 역할을 수행한다.
2-2. 뷰 작성하기
src/main/resources/templates/example.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>타임리프 익히기</h1>
<!-- LocalDate를 yyyy-MM--dd 포맷으로 변경-->
<p th:text="${#temporals.format(today, 'yyyy-MM-dd')}"></p>
<div th:object="${person}"> <!-- person을 선택한 객체로 지정 -->
<p th:text="|이름 : *{name}|"></p>
<p th:text="|나이 : *{age}|"></p>
<p>취미</p>
<ul th:each="hobby: *{hobbies}"> <!-- 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>
- temporals.format() 함수
LocalDate 타입인 오늘 날짜를 yyyy-MM-dd 형식의 String 타입으로 포매팅 - th:object
모델에서 받은 객체 중 "person"이라는 키를 가진 객체의 데이터를 하위 태그에 지정
그러면 하위 태그에서는 *{...}를 사용해 부모태그에 적용된 객체 값에 접근할 수 있다. - th:text
텍스트를 표현함
여기서는 이름: 이라는 준자열과 person 객체의 name 값인 홍길동을 이어 붙임 - th:each
hobbies 객체의 개수만큼 반복하는 반복자이다.
["운동", "독서"] 이므로 두 번 반복 - th:if
if 문
운동인 경우 대표 취미로 출력
2-3. 뷰 테스트하기
localhost:8080/thymeleaf/example
스프링 부트 서버를 실행시키고 해당 url로 접속하면
서버의 모델에서 넘겨주었던 객체가 html 상에서 제대로 받아와서 화면에 띄우는 것을 확인할 수 있다.
반응형
'JAVA > SpringBoot 3' 카테고리의 다른 글
| [스프링 부트 3] 스프링 시큐리티 - 1 (스프링 시큐리티, 인증과 인가 ) (0) | 2024.08.14 |
|---|---|
| [스프링 부트 3] 블로그 만들기 - 3 (타임리프를 활용하여 블로그 뷰 구현하기) (0) | 2024.08.12 |
| [스프링 부트 3] 블로그 만들기 - 2 (글 목록 조회 / 단일 조회 / 삭제 / 수정 API 구현) (0) | 2024.08.08 |
| [스프링 부트 3] 블로그 만들기 - 1 (블로그 글 작성 API 구현) (4) | 2024.08.07 |
| [스프링 부트 3] ORM, JPA, 하이버네이트 (0) | 2024.07.30 |
