[Thymeleaf] 텍스트 (text)

1. text

• 텍스트를 출력하는 기능
• HTML의 컨텐츠(content)에 데이터를 출력할 때는 th:text를 사용한다.

Example

model.addAttribute("data", "Hello Spring!");

(1) th:text 사용

<span th:text="${data}"></span> <!--출력 : Hello Spring!-->

(2) [[..]] 사용

• HTML 태그의 속성이 아니라 HTML 콘텐츠 영역안에서 직접 데이터를 출력하고 싶다면 [[...]]를 사용한다.

<span>[[${data}]]</span> <!--출력 : Hello Spring!-->

 

th:text, [[...]]는 둘 다 기본적으로 Escape를 제공한다.

 

* 이스케이프 (Escape)

특수 문자를 HTML로 변환하는 행위

• HTML 문서는 <,> 같은 특수 문자를 기반으로 정의된다.
• 뷰 템플릿으로 HTML 화면을 생성할 때는 출력하는 데이터에 이러한 특수 문자가 있는 것을 주의해서 사용해야 한다.

* HTML 엔티티

<,> 같은 특수 문자를 태그가 아니라 문자로 표현할 수 있는 문자

• < : &lt;
• > : &gt
• 수많은 HTML 엔티티가 있다. 사용할 때마다 검색을 통해 알아보는 것이 바람직하다.

Example

//Controller
model.addAttribute("data", "Hello <b>Spring!</b>");

<span th:text="${data}"></span> <!--출력 : Hello &lt;b&gt;Spring!&lt;/b&gt-->

 

2. utext

• 이스케이프 기능을 사용하지 않고 렌더링 한다.
• th:text => th:utext
• [[...]] => [(...)]

<span th:utext="${data}"></span> <!--출력 : Hello Spring!(진하게)-->

<span>[(${data})]</span> <!-- 출력 : Hello Spring!(진하게)-->

 

3. 정리

• 실제 서비스를 개발하다 보면 escape를 사용하지 않아서 HTML이 정상 렌더링 되지 않는 수많은 문제가 발생한다.
• escape를 기본으로 하고, 꼭 필요할 때만 unescape를 사용하자.