타임리프 (Thymeleaf) 란 ?
타임리프 (Thymeleaf) 란 컨트롤러가 전달하는 데이터를 통해 동적으로 화면을 만들어주는 템플릿 엔진이다.
템플린 엔진이란 지정된 템플릿 양식에 데이터 모델을 전달하여 동적 컨텐츠를 만들어주는 소프트웨어를 말한다.
초기 스프링에서는 서버 사이드에서 동적인 컨텐츠를 제공하기 위해 JSP 방식을 주로 사용했다면, 스프링 부트로 넘어오고 나서는 Thymeleaf 템플릿 엔진을 많이 사용한다.
Thymeleaf은 아래와 같은 특징이 있다.
1. 서버사이드 HTML 렌더링
템플릿 엔진은 백엔드 서버에서 HTML을 동적으로 렌더링하는 용도로 사용된다.
2. 네츄럴 템플릿
타임리프는 순수 HTML을 유지하는 특징이 있다.
만약 백엔드 서버가 기동중이지 않는다면 정적인 순수 HTML을 보여주고, 서버 기동 후에는 웹브라우저 요청에 따른 동적 HTML을 보여준다
(렌더링 전에는 원래 HTML을 보여주다가, 서버에 의해 렌더링 되면 th 가 붙은 타임리프 태그가 원래 html의 속성, 값을 덮어씌워서 보여준다.)
이는 View 단인 HTML만 수정해야 하는 경우에 서버를 기동하지 않고도 수정 및 확인이 가능하다는 장점이 있다.
3. 스프링 통합 지원
타임리프는 스프링과 자연스럽게 통합되고, 스프링의 다양한 기능을 편리하게 사용할 수 있게 지원한다.
예시로 타임리프를 사용하면 스프링 컨테이너에 등록된 빈을 HTML 내부에서 사용할 수 있고,
또한 HTTP 관련 객체 (Request, Response, Session 등) , 각종 유틸리티 객체와 날짜 등을 간편하게 사용할 수 있다.
타임리프 (Thymeleaf) 동작원리
웹브라우저에서 Spring Boot 서버로 특정 요청을 보내면, 내장 톰캣 서버는 스프링 컨테이너를 통해 Controller에 전달한다.
Controller 에서는 비즈니스 로직을 수행한 뒤 특정 문자를 반환하는데, 이 때 View Resolver가 아래의 경로에서 반환된 문자와 매칭되는 HTML 파일을 찾는다.
resource/template/{반환값}.html
View Resolver를 통해 HTML 에 연결된 이후, HTML 내부에서는 Thymeleaf 템플릿 엔진이 전달 받은 데이터를 템플릿 양식에 넣어서 동적으로 변경한 뒤 웹 브라우저에 반환한다.
타임리프 예시
1. build.gradle 에 thymeleaf 라이브러리를 추가한다 .
dependencies {
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
implementation 'org.springframework.boot:spring-boot-starter-web'
}
2. 웹브라우저의 요청을 처리할 controller 를 생성한다.
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class HelloController {
@GetMapping("/hello")
public String Hello(Model model){
model.addAttribute("data", "hello!!");
return "hello";
}
}서버 기동 후 웹브라우저에서 localhost:8080/hello 주소로 오는 요청을 처리하는 controller로,
resource/template 폴더 하위의 hello.html을 찾아서 Model 객체를 전달한다.
(필수로 return값 문자열과 html 파일명은 일치시켜야한다.)
Model 객체에 attribute명 “data”에 “hello!!” 라는 데이터가 담긴 채 hello.html 파일로 전달된다.
3. 동적 컨텐츠를 처리할 html 파일 생성
resource/static/hello.html 파일 생성하고 아래와 같이 적어준다.
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Hello</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<p th:text="'안녕하세요. ' + ${data}" >안녕하세요. 손님</p>
</body>
</html>Thymeleaf 템플릿 엔진이 Controller로 부터 전달받은 데이터를 ${data} 부분에 동적으로 넣어준다
주의할 점으로 Thymeleaf 엔진을 사용하기 위해 <html xmlns:"http://www.thymeleaf.org"> 부분을 넣어줘야 하고, ${data} 부분은 Controller 단의 attribute name과 동일하게 맞춰줘야 한다.
4. 서버 기동 및 테스트
웹 브라우저에 localhost:8080/hello 를 입력하면 아래와 같이 결과가 나온다
'Study > Spring Framework' 카테고리의 다른 글
| [Spring] DI(Dependency Injection) 란? (2) | 2023.10.04 |
|---|---|
| [Spring] Spring Bean 개념 (0) | 2023.10.01 |
| [Spring] Spring의 컨텐츠 제공 방식 (정적 컨텐츠, MVC와 템플릿 엔진, API ) (0) | 2023.09.28 |
| [Spring] 객체에서 특정 필드 제외하고 직렬화/역직렬화 하기(@JsonIgnore, @JsonProperty) (0) | 2023.07.19 |
| [Spring Boot] 다중 데이터베이스 환경 구축 방법 (0) | 2022.07.15 |
