text

컨트롤러에서 Model에 값을 담아 뷰로 넘기게 되는데, 이때 아래와 같이 활용할 수 있다.

1. html 태그를 이용해 출력하기

모델에 담은 데이터를 html 태그를 활용하여 출력할 때는 th:text 를 이용하고 아래와 같이 사용할 수 있다.

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

2. html 태그없이 출력하기

모델에 담은 직접 데이터를 html 태그없이 출력하고 싶을 때는 [[...]] 를 이용하고 아래와 같이 사용할 수 있다.

'[[${data}]]'

HTML 엔티티

웹 브라우저는 부등호(>,<)와 같은 기호를 태그로 인식할 수 있기 때문에 이런 경우에 부등호인지 태그인지 구분할 방법이 필요한데 이를 HTML 엔티티라고 합니다.

웹 사이트에서 소스보기를 하면 많이 볼 수 있습니다. 이걸 작성하려고 보니 마크다운 랭귀지에서도 적용되어 아래와 같이 블록으로 escape 해서 표현해야 하는군요.

• < : <
• > : >

Escape

우리가 Thymeleaf를 이용해 데이터를 출력하는 상황에서 Model에 부등호(>,<)를 태그가 아닌 문자로 썼는데 이를 태그로 인식하고 html 코드가 엉망이 되면 안되기 때문에 !

위에서 제공하는 th:text,[[...]] 는 기본적으로 Escape를 지원한다. 왜 기본으로 지원할까?

우리가 댓글 정보를 DB에서 읽어온 후 Model에 담아서 내보낸다고 가정하자. 이때 유저들이 부등호를 활용한 댓글을 달았다면? html 렌더링이 엉망이 될 것이다. 따라서 문자 그대로 출력되도록 HTML엔티티를 이용하여 표현할 수 있도록 Escape를 지원한다.

Unescape

만약에 우리가 출력하고자 하는 데이터를 실제로 html 코드로 입력시키고 싶은 경우에는 Unescape를 해야한다.

Thymeleaf에서 Unescape처리하여 텍스트를 출력하는 방법은 아래에서 알아보자.

utext

Unescape를 하여 내용을 출력하고 싶을 때는 아래와 같이 활용할 수 있다. utext를 unescpaed text라고 하면 외우기 쉽다.

따라서 utext를 이용했을 때, Model로 넘겨준 문자열에 만약 <b>가나다</b> 와 같은 태그가 들어갔다면, escape처리가 되지 않기 때문에 html 태그로 인식하여 진하게 볼드체로 나올 것이다.

1. html 태그를 이용해 출력하기

th:utext 를 이용하고 아래와 같이 사용할 수 있다.

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

2. html 태그없이 출력하기

[(...)] 를 이용하고 아래와 같이 사용할 수 있다. 괄호가 바뀌었으니 주의!

'[(${data})]'