[Thymeleaf] 주석, 블록 (th:block)

1. 주석

• 개발자가 작성한 해당 코드에 대한 이해를 돕는 설명이나 디버깅을 위해 작성한 구문을 의미한다.
• HTML 주석을 포함해서 타임리프가 제공하는 2가지 주석이 더 있다.

Example

//Controller
model.addAttribute("data", "Spring!");

(1) 표준 HTML 주석

• 자바스크립트의 표준 HTML 주석은 타임리프가 렌더링 하지 않고, 그대로 남겨둔다.

<h1>1. 표준 HTML 주석</h1>
<!--
<span th:text="${data}">html data</span>
-->

• 브라우저로 확인하면 보이지 않는다.
• 하지만 소스보기를 통해 주석 처리되었는지 확인할 수 있다.

(2) 타임리프 파서 주석

• 타임리프 파서 주석은 타임리프의 진짜 주석이다.
• 렌더링 시에 주석 부분을 제거한다.

<!-- 한줄 -->
<!--/* [[${data}]] */-->

<!-- 한줄 이상 -->
<!--/*-->
<span th:text="${data}">html data</span>
<!--*/-->

• 브라우저로 확인하면 보이지 않는다.
• 소스보기를 통해 확인하여도 코드 자체가 보이지 않는다.

(3) 타임리프 프로토타입 주석

• HTML 파일을 그대로 열어보면 주석처리, 타임리프를 렌더링 한 경우 정상적으로 보인다.
• HTML 파일을 웹 브라우저에서 그대로 열어보면 HTML 주석이기 때문에 이 부분을 웹 브라우저가 렌더링 하지 않는다.
• 하지만 타임리프 렌더링을 거치면 이 부분이 정상 렌더링 된다.

<!--/*/
<span th:text="${data}">html data</span>
/*/-->

 

2. 블록

<th:block>은 HTML 태그가 아닌 타임리프의 유일한 자체 태그이다.

• 타임리프의 특성상 HTML 태그 안에 속성으로 기능을 정의해서 사용한다.
• 만약 태그가 따로 없을 때 블록을 사용한다.

<th:block th:each="user : ${users}">
    <div>
        사용자 이름1 <span th:text="${user.username}"></span>
        사용자 나이1 <span th:text="${user.age}"></span>
    </div>
    <div>
        요약 <span th:text="${user.username} + ' / ' + ${user.age}"></span>
    </div>
</th:block>

• <th:block>은 렌더링시 제거된다.
  • 렌더링 시 th:block은 제거되고 블록 안에 있는 내용만 남는다.