타임리프 특징
1. 서버 사이드 HTML 렌더링(SSR): 타임리프는 백엔드 서버에서 HTML을 동적으로 렌더링하는 용도로 사용된다.
2. 네츄럴 템플릿: 순수 HTML을 그대로 유지하면서 뷰 템플릿도 사용할 수 있는 타임리프의 특징을 네츄럴 템플릿
3. 스프링 통합 지원: 타임리프는 스프링과 자연스럽게 통합되고, 스프링의 다양한 기능을 편리하게 사용할 수 있게 지원한다.
타임리프 사용 선언
<html xmlns:th="http://thymeleaf.org">
타임리프의 텍스트 출력 - text, utext
HTML 태그의 속성에 기능을 정의해서 동작한다. HTML의 콘텐츠(content)에 데이터를 출력 => th:text
<span th:text-"${data}">
HTML 태그의 속성이 아니라 HTML 콘텐츠 영역안에서 직접 데이터를 출력하고 싶으면 다음과 같이 [[...]]를 사용하면 된다.
컨텐츠 안에서 직접 출력하기 = [[${data}]]
HTML엔티티 - 웹 브라우저는 <를 HTML 태그의 시작으로 인식한다. 따라서 <를 태그의 시작이 아니라 문자로 표현할 수 있는 방법이 필요한데 이것을 HTML 엔티티라고 한다.
이스케이프(escape) - HTML에서 사용하는 특수 문자를 HTML엔티티로 변경하는 것.
th:text, [[...]]는 기본적으로 이스케이프를 제공
====> 이스케이프를 사용하지 않으려면
th:text -> th:utext
[[...]] -> [(...)]
th:inline="none": 타임리프는 [[...]]를 해석하기 때문에, 화면에 [[...]]글자를 보여줄 수 없다. 이 테그 안에서는 타임리프가 해석하지 말라는 옵션
ex)
<li><span th:inline="none">[[...]] = </span> [[${data}]]</li> -> 이스케이프된채로(=문자 그대로 출력된다.)
<li><span th:inline="none">[[...]] = </span> [(${data})]</li> -> 이스케이프되지 않아서 태그를 그대로 받아들여짐
변수 - 스프링에서는 SpringEL이라는 스프링이 제공하는 표현식을 사용
@GetMapping("/variable")
public String variable(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<>();
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">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>SpringEL 표현식</h1> <ul>Object
<li>${user.username} =
<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>
지역변수 선언
th:with 사용
ex)
<div th:with="first=${users[0]}">
<p><span th:text="${first.username}"></span>
</div>
기본 객체들은 스프링 부트 3.0이상부터 model에 넣어서 관리한다.
@GetMapping("basic-objects")
public String basicObjects(Model model, HttpServletRequest request,
HttpServletResponse response, HttpSession session) {
session.setAttribute("sessionData", "Hello Session");
model.addAttribute("request", request);
model.addAttribute("response", response);
model.addAttribute("servletContext", request.getServletContext());
return "basic/basic-objects";
}
@Component("helloBean")
static class HelloBean {
public String hello(String data) {
return "Hello " + data;
}
}
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>식 기본 객체 (Expression Basic Objects)</h1> <ul>
<li>request = <span th:text="${request}"></span></li>
<li>response = <span th:text="${response}"></span></li>
<li>session = <span th:text="${session}"></span></li>
<li>servletContext = <span th:text="${servletContext}"></span></li>
<li>locale = <span th:text="${#locale}"></span></li>
</ul>
<h1>편의 객체</h1> <ul>
<li>Request Parameter = <span th:text="${param.paramData}"></span></li>
<li>session = <span th:text="${session.sessionData}"></span></li>
<li>spring bean = <span th:text="${@helloBean.hello('Spring!')}"></span></
li> </ul>
</body>
</html>'spring boot' 카테고리의 다른 글
| 스프링 포맷터(Formatter) (0) | 2023.11.23 |
|---|---|
| 스프링 타입 컨버터 - Converter (1) | 2023.11.23 |
| 타임리프 정리-2 (0) | 2023.10.27 |