타임리프의 동작은 기존 HTML 테그의 속성에 기능을 정의하여 이루어진다. th:text 를 사용하여 HTML 콘텐츠에 데이터를 출력한다.
<span th:text="${data}">
Controller
● ● ●
@Controller
@RequestMapping("/basic")
public class BasicController {
@GetMapping("/text-basic")
public String textBasic(Model model) {
model.addAttribute("data", "Test Thymeleaf");
return "basic/text-basic";
}
}.HTML
<html xmlns:th="http://www.thymeleaf.org">
<body>
<ul>
<li>th:text 사용 <span th:text="${data}"></span></li>
<li>컨텐츠 안에서 직접 출력하기 = [[${data}]]</li>
</ul>
</body>
</html>결과
● ● ●
<body>
<ul>
<li>th:text 사용 <span>Test Thymeleaf</span></li>
<li>컨텐츠 안에서 직접 출력하기 = Test Thymeleaf</li>
</ul>
</body>th:field
추후 소개할 th:field는 TypeConverter가 적용된다. 상황에 맞게 사용하면 좋다.
이 외에도 th:text="${...}" VS th:text="${{...}}" 등의 특징들을 이후 타입 컨버터 파트에서 소개하겠다.
Escape
HTML 문서는 <, > 같은 특수 문자를 기반으로 정의된다. 그렇기에 이러한 특수 문자를 주의하여 뷰 템플릿을 사용한 HTML 화면을 생성해야한다.
기존 Controllerd의 model에 "data"를 "Test Thymeleaf"에서 "Test <b>Thymeleaf</b>로 수정하여 컴파일한다.
결과
웹 브라우저: Test <b>Thymeleaf</b>
● ● ●
<body>
<ul>
<li>th:text 사용 <span>Test <b>Thymeleaf</b></span></li>
<li>컨텐츠 안에서 직접 출력하기 = Test <b>Thymeleaf</b></li>
</ul>
</body>data의 "Thymeleaf"를 HTML 테그를 통해 강조를 희망했지만, 의도와 다르게 <b>테그가 그대로 출력된다.
또한 해당 HTML의 소스에는 < 등의 문자들이 < 로 변경되었다.
HTML 엔티티
웹 브라우저는 < 를 HTML 테그의 시작으로 인식하기에, 이를 문자로 표현하기위한 방법이 HTML 엔티티이다. 여기서 HTML에서 사용하는 특수 문자를 HTML 엔티티로 변경하는 것을 Escape라고한다.
여기서 타임리프의 th:text, [[...]] 는 Escape 를 기본적으로 제공한다. 아래와 같이 각각의 HTML 엔티티가 있다.
< → <
> → >
Unescape
기존의 강조 의도를 수행하기위해 타임리프의 th:utext , [(...)] 기능을 사용한다.
.HTML
<html xmlns:th="http://www.thymeleaf.org">
<body>
<ul>
<li><span th:text="${data}"></span></li>
<li><span th:utext="${data}"></span></li>
</ul>
<ul>
<li>[[${data}]]</li>
<li>[(${data})]</li>
</ul>
</body>
</html>
웹 브라우저
// text vs utext
Test <b> Thymeleaf<b>
Test Thmeleaf (강조)
// [[...]] vs [(...)]
Test <b> Thymeleaf<b>
Test Thmeleaf (강조)
● ● ●
<body>
<ul>
<li<span>Test <b>Thymeleaf</b></span></li>
<li><span>Test <b>Thymeleaf</b></span></li>
</ul>
</body>다음과 같이 기존의 의도가 잘 반영된 것을 확인할 수 있다.
주의!
실제 서비스를 개발 과정에서 escape를 사용하지 않아서 HTML이 정상 렌더링 되지 않는 수 많은 문제가 발생한다. escape를 기본으로 하고, 꼭 필요한 때만 unescape를 사용해아한다.
'Thymeleaf' 카테고리의 다른 글
| [Thymeleaf] 리터럴 Literal (0) | 2022.12.25 |
|---|---|
| [Thymeleaf] 유틸리티 객체 및 날짜 (0) | 2022.12.24 |
| [Thymeleaf] 기본 객체 및 편의 객체 (0) | 2022.12.23 |
| [Thymeleaf] 변수 - SpringEL (0) | 2022.12.17 |
| [Thymeleaf] 타임리프 소개 (1) | 2022.12.15 |