1. 개념
- 타임리프의 가장 기본 기능인 텍스트 출력 기능
- 타임리프는 기본적으로 HTML 태그의 속성에 기능을 정의하여 동작함
- HTML의 콘텐츠에 데이터를 출력할 경우, th:text 사용
<span th:text="${data}">- HTML 콘텐츠의 영역 안에 직접 데이터를 출력할 경우, [[...]] 사용
컨텐츠 안에서 직접 출력하기 = [[${data}]]2. Escape 기능
- HTML 문서는 <, > 와 같은 특수문자를 기반으로 정의
- 따라서 뷰 템플릿으로 HTML 화면을 생성시 출력하는 데이터에 이러한 특수문자가 존재하는 것을 주의!!
- 예) (웹브라우저)Hello Spring! => (소스보기) Hello <b>Spring!</b>
- 개발자는 bold 처리를 의도하였지만, 태그가 그대로 출력됨
- 소스보기하면 < 부분이 < 로 변경
📌 HTML 엔티티
- 웹 브라우저는 <를 HTML 태그의 시작이라고 인식함
- 따라서 < 를 있는그대로의 문자로 표현할 방법이 필요한데, 이것이 바로 HTML 엔티티
- 이렇게 HTML에서 사용하는 특수문자를 HTML 엔티티로 변경하는 것이 바로 "이스케이프(Escape)"
- 타임리프가 제공하는 "th:text, [[...]]"는 기본적으로 이스케이프를 제공
📌 Escape를 사용하고싶지 않다면?
- Unescape 사용
- 타임리프는 아래 두 기능을 제공
- th:text => th:utext
- [[...]] => [(...)]
3. 사용 예시
- controller
@Controller
@RequestMapping("/basic")
public class BasicController {
@GetMapping("text-basic")
public String textBasic(Model model) {
model.addAttribute("data", "Hello <b>Spring!<b>");
return "basic/text-basic";
}
@GetMapping("text-unescaped")
public String textUnescaped(Model model) {
model.addAttribute("data", "Hello <b>Spring!<b>");
return "basic/text-unescaped";
}
}- text-basic.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>
콘텐츠에 데이터 출력하기
</h1>
<ul>
<li>
th:text 사용 <span th:text="${data}"></span>
</li>
<li>
콘텐츠 안에서 직접 출력하기 = [[${data}]]
</li>
</ul>
</body>
</html>- text-unescaped.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</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> //escape
<li><span th:inline="none">[(...)] = </span>[(${data})]</li> //unescape
</ul> 
[주의] 📌 실무에서는 escape를 기본으로 하고, 꼭 필요한 경우만 unescape 사용!!!
- 실제 escape를 사용하지 않을 경우 HTML 정상 렌더링이 되지 않는 수많은 문제가 발생하므로
