-
Spring MVC - 타임리프(Thymeleaf)에 대한 간단한 정리Spring/Spring MVC 2022. 1. 31. 23:01728x90반응형더보기
타임리프 메뉴얼
Tutorial: Using Thymeleaf
1 Introducing Thymeleaf 1.1 What is Thymeleaf? Thymeleaf is a modern server-side Java template engine for both web and standalone environments, capable of processing HTML, XML, JavaScript, CSS and even plain text. The main goal of Thymeleaf is to provide a
www.thymeleaf.org
Tutorial: Thymeleaf + Spring
Preface This tutorial explains how Thymeleaf can be integrated with the Spring Framework, especially (but not only) Spring MVC. Note that Thymeleaf has integrations for both versions 3.x and 4.x of the Spring Framework, provided by two separate libraries c
www.thymeleaf.org
설정 방법(스프링 부트사용하지 않을 시)
Tutorial: Thymeleaf + Spring
Preface This tutorial explains how Thymeleaf can be integrated with the Spring Framework, especially (but not only) Spring MVC. Note that Thymeleaf has integrations for both versions 3.x and 4.x of the Spring Framework, provided by two separate libraries c
www.thymeleaf.org
타임리프(Thymeleaf)
타임리프는 컨트롤러가 전달하는 데이터를 이용해 동적으로 화면을 만들어주는 역할을 하는 뷰 템플릿 엔진이다. 타임리프가 갖는 대표적인 특징은 다음과 같다.
- 서버상에서 동작하지 않아도 HTML 파일의 내용을 바로 확인이 가능하다.
- 순수 HTML 구조를 유지한다.
특징
타임리프는 순수 HTML을 유지하기 때문에 Natural Template(내추럴 템플릿)이라고도 불린다. 서버를 가동하지 않으면 순수 HTML을, 서버를 구동하여 뷰 템플릿을 거쳐 동적으로 변경된 HTML을 확인할 수 있다. JSP같은 경우는 서버를 구동하지 않고 해당 파일을 열게 되면 JSP 소스코드와 HTML이 섞여있어서 정상적인 확인이 불가능했다. 즉 오직 서버를 통해서 JSP을 열어야 JSP 파일을 확인할 수 있었다. 반면에 타임리프는 화면 구성을 서버 가동없이 쉽게 파악할 수 있어 개발에 수정할 때마다 서버 재가동이 필요 없어지기 때문에 개발에 용이해진다.
서버 가동없이 타임리프와 JSP로 해당 파일을 웹프라우저를 통해 열었을 때 위 이미지를 보면 타임리프는 순수 HTML파일을 유지하기 때문에 웹브라우저를 통해 해당 파일의 경로를 입력하면 화면이 잘 나온 것을 볼 수 있다. 반면에 JSP는 화면이 아닌 그냥 코드가 나타난 것을 볼 수 있다.
타임리프는 어떻게 순수 HTML파일을 유지하면서 동적 HTML 파일을 제공할 수 있을까?
간단하게 설명하자면 서버 가동없이 웹 브라우저를 이용해 해당 파일을 열게 되면 웹 브라우저는 타임리프가 사용하는 속성인 th:속성을 알지 못하기 때문에 타임리프 속성을 제외한 순수 HTML 속성으로 화면을 구성하여 순수 HTML파일을 유지할 수 있다. 반면에 서버가 가동이 되어 타임리프 뷰 템플릿 엔진을 이용하게 되면 서버 사이드에서 렌더링 되어 기존 HTML의 속성이 아닌 타임리프의 속성으로 대체되어 동적 HTML 파일을 제공할 수 있게된다.
반응형타임리프(Thymeleaf) 사용
타임리프 라이브러리 추가
Gradle - build.gradle
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'Maven - pom.xml
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency>
반응형타임리프의 기본 경로
타임리프는 다음과 같이 기본 뷰 템플릿 경로로 다음과 같이 아래 코드가 자동으로 추가된다.
spring.thymeleaf.prefix=classpath:/templates/ spring.thymeleaf.suffix=.html즉, 컨트롤러에서 String으로 반환을 하게 되면 기본 경로 패스가 붙게 된다.
@Controller public class ResponseViewController { @RequestMapping("/response-view-v2") public String responseViewV2(Model model) { model.addAttribute("data", "hello!!"); return "response/hello"; } }/templates/response/hello.html
타임리프 문법
타임리프를 사용하기 위해서는 html 태그에 다음과 같이 추가해준다.
<html xmlns:th="http://www.thymeleaf.org">대부분의 HTML 속성은 타임리프의 속성으로 쓰이는 th:html 속성으로 변경할 수 있다.
@{ URL 링크 } - URL 링크 표현식
- @{ URL 링크 } : 타임리프는 URL 링크를 사용하는 경우 @{...}를 사용한다.
- URL 링크 표현식을 사용하면 서블릿 컨텍스트가 자동으로 포함이 된다.
- 예시1)
th:href="@{/css/bootstrap.min.css}"
예시2)
th:href="@{/basic/items/{itemId}(itemId=${item.id}, query='test')}"
예시3) 리터럴 대체 문법을 사용해서 더 간단히 할 수 있다.
th:href="@{|/basic/items/${item.id}|}"
반응형| 리터럴 | - 리터럴 대체
- 타임리프에서 문자와 표현식 등은 분리되어 있기 때문에 더해서 사용해야 한다.
- 리터럴 대체 문법을 사용하면, 더하기 없이 편리하게 사용할 수 있다.
- 예시1)
<span th:text="'welcome to our application, ' + ${user.name} + '!' ">
<span th:text="|welcome to our application, ${user.name}!|">
예시2)
th:onclick="'location.href=' + '\'' + @{/basic/items/add} + '\''"
th:onclick="|location.href='@{/basic/items/add}'|"
${ 변수명 } - 변수 표현식
- 모델에 포함된 값이나, 타임리프 변수로 선언한 값을 조회할 수 있다.
- 프로퍼티 접근법을 사용 ( item.getPrice() -> item.price )
- 예시)
<td th:text="${item.price}">10000</td> ( 10000 대신 item.price 값이 들어간다. )
#{ 변수명 } - 외부 자원 변수 표현식
- 메시지, properties와 같은 외부 자원의 데이터를 조회
- 예시)
th:text="#{member.register}"
728x90반응형'Spring > Spring MVC' 카테고리의 다른 글
Spring MVC - 타임리프(Thymeleaf)가 제공하는 기본 객체와 편의 객체 (0) 2022.02.02 Spring MVC - 타임리프(Thymeleaf) 기본 기능 1(텍스트, 변수 표현식, 지역 변수) (0) 2022.02.02 Spring MVC - HTTP 메시지 컨버터 (0) 2022.01.30 Spring MVC - 응답 메시지를 만드는 방법 (정적 리소스, 뷰 템플릿, HTTP API 메시지 바디에 직접 입력) (0) 2022.01.29 Spring MVC - JSON으로 보낸 HTTP 요청 메시지 조회 (0) 2022.01.29