[Thymeleaf] 타임리프 text, utext

타임리프

text

타임 리프의 기본적인 text 출력 기능을 알아보자. controller에서 model의 "data"에 값이 담겨왔다고 생각을 한다.

1. 태그에 th:text 사용하기
2. [[${data}]] text에 직접 넣어 사용하기

 <li>th:text 사용해서 출력 <span th:text="${data}"></span></li>
 <li>컨텐츠 안에서 직접 출력 = [[${data}]]</li>

Controller에서 Hello, Spring! 이 data에 담겨올 때 <b> 태그를 사용해 spring 단어를 진하게 하려 한다.

Hello, <b> Spring! <b> 이런 식으로 보냈을 경우 실행 결과는 의도한 대로 작동하지 않는다. <는 &lt, >는 &gt 변경된 것을 확인할 수 있다. 

 

HTML 엔티티

• 웹 브라우저는 <를 HTML 태그의 시작으로 인식한다.
• HTML에서는 <를 문자로 표현하기 위해 HTML 엔티티를 사용한다.
• HTML 엔티티로 특수 문자를 변경하는 과정을 이스케이프 라고 한다. 이스케이프는 타임리프의 th:text나 [[...]] 에서는 기본적으로 제공한다.

Escape

HTML 문서에서는 특수 문자인 <, >를 주의해서 사용해야 된다.

---

utext

위의 Escape 기능을 사용하지 않으려면 utext를 사용하면 된다.

1. th:text -> thLutext
2. [[...]] -> [(...)]

 <li>th:text 사용해서 출력 <span th:utext="${data}"></span></li>
 <li>컨텐츠 안에서 직접 출력 = [(${data})]</li>

실제 서비스를 개발할 때 escape를 사용하지 않아 HTML이 정상 렌더링 되지 않는 수많은 문제가 있다고 한다.

escape를 기본으로 하고 꼭 필요한 경우 unescape를 사용하자.

---

출처 : https://www.inflearn.com/course/%EC%8A%A4%ED%94%84%EB%A7%81-mvc-2/dashboard

스프링 MVC 2편 - 백엔드 웹 개발 활용 기술 - 인프런 | 강의