[Spring] 타임리프(Thymeleaf)

형이·2023년 9월 22일

Spring

목록 보기

9/21

📝 Thymeleaf

🖥️ 1. 타임리프 특징

1-1. 서버 사이드 HTML 렌더링 (SSR)

타임리프는 백엔드 서버에서 (JSP처럼) HTML을 동적으로 렌더링 하는 용도로 사용된다.

1-2. 네츄럴 템플릿

타임리프는 순수 HTML을 최대한 유지하는 특징이 있다.

타임리프로 작성한 파일은 HTML을 유지하기 때문에 웹 브라우저에서 파일을 직접 열어도 내용을 확인할 수 있고, 서버를 통해 뷰 템플릿을 거치면 동적으로 변경된 결과를 확인할 수 있다.

순수 HTML을 그대로 유지하면서 뷰 템플릿도 사용할 수 있는 타임리프의 특징을 네츄럴 템플릿 (natural templates)이라 한다.

1-3. 스프링 통합지원

타임리프는 스프링과 자연스럽게 통합되고, 스프링의 다양한 기능을 편리하게 사용할 수 있게 지원한다.

🖥️ 2. 타임리프 태그 고정

🖥️ 3. 타임리프 표현식

3-1. 간단한표현

변수표현식 : ${...}

선택 변수 표현식 : *{...}

메시지 표현식 : #{...}

링크 URL 표현식 : @{...}

조각 표현식 : ~{...}

Thymeleaf 표현식 정리

📝 예제

package com.codingbox.core3.basic.thymeleaf;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;

import com.codingbox.core3.basic.User;

@Controller
@RequestMapping("/basic")
public class BasicController {

	@GetMapping("text-basic")
	public String textBasic(Model model) {
		
		model.addAttribute("data", "Hello Spring!");
		//model.addAttribute("data", "<b>Hello Spring!</b>");
		
		return "basic/text-basic";
	}
	
	@GetMapping("text-unescaped")
	public String textUnescaped(Model model) {
		
		model.addAttribute("data", "<b>Hello Spring!</b>");
		
		return "basic/text-unescaped";
	}
	
	@GetMapping("variable")
	public String textVariable(Model model) {
		
		User userA = new User("UserA", 10);
		User userB = new User("UserB", 20);
		
		List<User> list = new ArrayList<>();
		list.add(userA);
		list.add(userB);
		
		Map<String, User> map = new HashMap<String, User>();
		map.put("userA", userA);
		map.put("userB", userB);
		
		model.addAttribute("user", userA);
		model.addAttribute("users", list);
		model.addAttribute("userMap", map);
		
		return "basic/variable";
	}
}

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>컨텐츠에 데이터 출력하기</h1>
	<ul>
		<li>th:text 사용 <span th:text="${data}"></span></li>
		<li>컨텐츠 안에 직접 출력 =[[${data}]]</li>
	</ul>
</body>
</html>

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>text vs utext</h1>
	<ul>
		<li>th:text = <span th:text="${data}"></span></li>
		<li>th:utext = <span th:utext="${data}"></span></li>
	</ul>
	<h1>
		<span th:inline="none">[[]] vs [()]</span>
	</h1>
	<ul>
		<li><span th:inline="none">[[...]] = </span>[[${data}]]</li>
		<li><span th:inline="none">[(...)] = </span>[(${data})]</li>
	</ul>
</body>
</html>

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>SpringEL 표현식</h1>
	<ul>
		Object
		<li>
			${user.username} =
			<span th:text="${user.username}"></span>
		</li>
		<li>
			${user['username']} =
			<span th:text="${user['username']}"></span>
		</li>
		<li>
			${user.getUsername()} =
			<span th:text="${user.getUsername()}"></span>
		</li>
	</ul>
	<ul>
		List
		<li>
			${users[0].username} =
			<span th:text="${users[0].username}"></span>
		</li>
		<li>
			${users[0]['username']} =
			<span th:text="${users[0]['username']}"></span>
		</li>
		<li>
			${users[0].getUsername()} =
			<span th:text="${users[0].getUsername()}"></span>
		</li>
	</ul>
	<ul>
		Map
		<li>
			${userMap['userA'].username} =
			<span th:text="${userMap['userA'].username}"></span>
		</li>
		<li>
			${userMap['userA']['username']} =
			<span th:text="${userMap['userA']['username']}"></span>
		</li>
		<li>
			${userMap['userA'].getUsername()} =
			<span th:text="${userMap['userA'].getUsername()}"></span>
		</li>
	</ul>
</body>
</html>