Thymeleaf의 th:replace와 th:include는 이렇게 구분한다!

최근 SpringBoot x Thymeleaf를 본격적으로 사용하게 되었습니다만, 요전날 UI 부품의 공통화로 조금 혼란한 적이 있었기 때문에 코트의 전말을 정리해 둡니다.

먼저 결론

먼저 결론만 써 둡니다.
공통화하고 싶은 파트가 하나의 태그에 들어가 있으면 th:replace , 그렇지 않으면 th:include 를 사용한다.

Thymeleaf는 부품의 공통화를 위해 두 가지 방법을 제공합니다. th:replace 와 th:include 입니다. 이들은 위의 규칙에 따라 구분할 수 있습니다.
본가 사이트에도 th:include와 th:replace의 차이 라는 항목은 있어, 이하와 같이 쓰여져 있습니다만,

th:include와 th:replace의 차이점은 무엇입니까? th:include 는 호스트 태그 안에 조각의 내용을 포함하는 반면 th:replace 는 실제로 호스트 태그를 조각으로 바꿉니다.

나에게는 처음에는 잘 몰랐다.
거기서 거동을 정리해 보았더니, 본가의 해설의 의미에도 심플한 룰에도 눈치챘습니다.

그럼 차례로 거동을 봅시다.
이하에 등장하는 코드는 github 에 들고 있습니다.

th:replace의 거동

th:replace 는 작성된 태그를 th:fragment가 작성된 태그로 대체합니다.
단순히 태그를 대체하므로 th:replace 태그와 th:fragment 태그가 1:1 대응해야 합니다.

예를 들어 이 경우 th:replace 를 사용할 수 있습니다.

src

<div th:replace="common::replace"></div>
<hr class="ui divider">
<div th:replace="common::replace"></div>

디스플레이

<div class="ui container">
  <div class="ui buttons">
    <button class="ui primary button">Save</button>
    <div class="or"></div>
    <button class="ui button">Cancel</button>
  </div>
</div>
<hr class="ui divider">
<div class="ui container">
  <div class="ui buttons">
    <button class="ui primary button">Save</button>
    <div class="or"></div>
    <button class="ui button">Cancel</button>
  </div>
</div>

<button> 의 집합이 그룹화되어 하나의 태그로 정리되어 있기 때문에 th:replace 에서 가츨으로 대체해 버리면 깨끗하게 의도한 View를 구축할 수 있네요.

th:include의 거동

th:include 는 써진 태그는 그대로, 태그의 내부를 재기입합니다.th:replace와 달리 공통 부품과 1:1 대응이 아니어도 대체가 가능합니다.

src

<div class="ui three item menu" th:include="common::include"></div>
<hr class="ui divider">
<div class="ui vertical menu" th:include="common::include"></div>

디스플레이

<div class="ui three item menu">
  <a class="active item" href="#">item 1</a>
  <a class="item" href="#">item 2</a>
  <a class="item" href="#">item 3</a>
</div>
<hr class="ui divider">
<div class="ui vertical menu">
  <a class="active item" href="#">item 1</a>
  <a class="item" href="#">item 2</a>
  <a class="item" href="#">item 3</a>
</div>

th:include 를 쓴 태그의 class 지정에 의해, 세로와 가로 줄이 바뀌어 있습니다. 이러한 지정을 하고 싶을 때는 th:include 가 유효하다고 할 수 있습니다.

요약 : 만들 수없는 구성도 있으므로 조심하십시오.

그러나, 이것은 공통화 부품이 하나의 태그에 정리되어 있지 않고, 한편 부모 태그가 공통 부품 이외의 아이 요소를 가지고 있으면 쓸 수 없습니다.

example

<div>
    <p>共通化したい部品1</p>
    <p>共通化したい部品2</p>
    <p>共通化したい部品3</p>
    <div>このページ固有の要素たち</div>
</div>

일단 지금은 그런 상황에 조우하고 있지 않습니다만, 그렇게 되면 HTML의 구성으로 흡수할 수밖에 없을 것 같습니다.