[Thymeleaf] Text & Escape (텍스트 표현 & 이스케이프)

 

th:text & [[${...}]]

타임리프는 기본적으로 HTML 태그의 속성(Attribute)의 기능을 정의해서 동작하게 된다

HTML의 콘텐츠(content)에 데이터를 출력할 때는 th:text를 사용한다

<span th:text="${data}">Example</span>

위와 같이 th:text를 사용하면 Example -> ${data} 값으로 치환되게 된다

만약 치환하지 않고 콘텐츠 안에서 직접 출력하고 싶다면 아래와 같이 작성하면 된다

<span>[[${data}]]</span>

 

타임리프는 기본적으로 문자열들을 이스케이프 처리하는데

예를 들어 Hello <b>Spring!</b>와 같은 값이 ${data}로 넘어왔다고 가정해보자

 

개발자의 의도대로라면 Spring!이 bold처리가 되어 굵게 표시가 되어야 하겠지만

타임리프가 이스케이프를 하게 되면 아래와 같이 출력이 된다

 

웹브라우저 : <b>Spring!</b>

페이지 소스: &lt;b&gt;Spring!&lt;/b&gt;

 

< , >와 같은 특수문자를 HTML 엔티티라고도 표현한다

이러한 특수문자들을 타임리프가 기본적으로 이스케이프 하는 이유는

웹브라우저가 HTML을 해석할 때 바로 이 HTML 엔티티를 기준으로 태그를 구분하는 등의 해석을 하는데

만약 클라이언트(사용자)가 게시판에 이러한 특수문자로 도배를 한다고 해보자, 개발자가 만들어놓은 HTML이 다 깨지게 될 것이다

이러한 문제를 방지하기 위하여 타임리프는 기본적으로 text들을 이스케이프 한다

 

하지만 예외 상황이 항상 있듯이 이스케이프를 사용하지 않을 수 있다

 

th:utext & [(${...})]

unescape를 해야 하는 상황이라면 th:utext를 사용할 수 있다

<!--${data} = <b>Spring!</b>-->

<span th:utext="${data}"></span>

이렇게 작성하게 되면 의도한 대로 ${data} 안에 있는 이스케이프 처리가 되지 않고 굵게 표시된다

 

웹 브라우저 : Spring!

페이지 소스 : <b>Spring!</b>

 

아래와 같이 작성하면 값 치환이 아닌 unescape가 적용되어 직접 출력할 수 있다

<span>[(${data})]</span> <!--[( 대괄호, 중괄호 조합에 주의-->

 

핵심정리

타임리프는 특수문자로 인하여 HTML이 깨지는 것을 방지하기 위하여 이스케이프를 기본으로 지원함

이스케이프 적용 -> th:text , [[${...}]]

이스케이프 제외 -> th:utext , [(${...})]

 

---

개인 학습을 위해 작성되는 글입니다.

제가 잘못 알고 있는 점에 대한 지적 / 더 나은 방향에 대한 댓글을 환영합니다.

 

참조 링크:

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

https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html