Thymeleaf 타임리프 th:block 활용

 

 

 

th:block 은
HTML에 영향을 미치지 않는, *보이지 않는 블록을 생성하는 속성

 

 

* 예를 들어 부모요소가 있고 그안에 자식요소가 있는데 백엔드에서 넘겨받은 데이터로

 

부모요소와 자식요소의 text 값을 각기 다르게 표현하고 싶을 때

 

th:text나 th:utext 를 부모요소에 적용시키면 부모요소에 주입한 값으로 덮어씌워져서

 

그 안에 있는 자식요소는 아래 예시 코드처럼 소멸하게 된다.

 

<div th:text="${element.title}"> <!-- 부모요소 -->
    <span th:text="${element.content}"></span> <!-- 자식요소 -->
</div>


<!-- 위 코드가 서버에서 렌더링되고 HTML에 전달되어 표현될 때 --> 
<div>
  "제목"
</div>

 

이럴때 th:block 을 활용하여 아래 예시와 같이 사용하여 표현이 가능하다.

 

<div> <!-- 부모요소 -->
    <!-- th:block 을 사용하여 자식요소에는 영향을 주지 않고 부모요소의 text 값 표기 -->
    <th:block th:text="${element.title}"></th:block>
    <span th:text="${element.content}"></span> <!-- 자식요소 -->
</div>


<!-- 위 코드가 서버에서 렌더링되고 HTML에 전달되어 표현되면 다음과 같음 --> 
<div>
  "제목"
  <span>"내용"</span>
</div>

 

 

* 또 다른 예로 List 안 List가 있는 구조의 데이터를 넘겨 받아 th:each로 이중 반복문으로 표현하는데

 

*outerList들 중에 내부에 innerList가 있는 outer가 있고 없는 outer가 있다고 가정하고

 

아래 예시 코드처럼 작성 후 실행하면 에러가 발생한다.

 

<li th:each="outer : ${outerList}">
    <div>
    	<div>
            <span th:text="${outer.name}"></span>
        </div>
        <ul th:each="inner : ${outer.innerList}">
            <li th:text="${inner.title}"></li>
        </ul>
    </div>
</li>

 

Caused by: org.attoparser.ParseException: Exception evaluating SpringEL expression: "outer.innerList"

 

상위에서 반복된 outer안에서 inner를 반복 하려고 하는데

 

innerList가 없는 outer가 있으니 key값을 찾지 못해 에러가 발생하는 것이다.

 

그럴 경우 아래 코드처럼 th:block을 활용하여 데이터가 있는 경우에만 반복 하도록 제어해서 에러없이 동작하게 할 수 있다.

 

<li th:each="outer : ${outerList}">
    <div>
    	<div>
            <span th:text="${outer.name}"></span>
        </div>
        <!-- th:block을 이용해 키값을 먼저 체크하여 outer 내부에 List가 있는 경우에만 반복하도록 함 -->
        <th:block th:if="${outer.containsKey('innerList')}">
            <ul th:each="inner : ${outer.innerList}">
                <li th:text="${inner.title}"></li>
            </ul>
        </th:block>
    </div>
</li>