Thymeleaf th:replace 차이 정리

Thymeleaf로 공통 영역을 불러올 때 자주 쓰는 두 가지 방식

<div th:replace="~{includes/user/bottom}"></div>
<div th:replace="~{includes/user/bottom::bottom}"></div>

두 구문의 차이는

“파일 전체를 불러오느냐” vs “특정 fragment만 불러오느냐”

1. th:replace="~{includes/user/bottom}"

파일 전체를 그대로 삽입
includes/user/bottom.html의 최상위 엘리먼트(루트)부터 끝까지 현재 <div> 자리에 통째로 들어감.

✅ 예시

<div th:replace="~{includes/user/bottom}"></div>

<!-- includes/user/bottom.html -->
<div>
  <footer>푸터 내용</footer>
  <script src="/js/common.js"></script>
</div>

👉 결과: <footer>와 <script> 모두 포함되어 div가 통째로 대체됨.

2. th:replace="~{includes/user/bottom::bottom}"

fragment(일부)만 불러옴.
bottom.html 안에서 th:fragment="bottom"으로 정의된 특정 블록만 삽입함.

✅ 예시

<!-- includes/user/bottom.html -->
<div th:fragment="bottom">
  <footer>푸터 내용</footer>
</div>

<div th:fragment="chatbot">
  <script src="/js/chat.js"></script>
</div>

<div th:replace="~{includes/user/bottom::bottom}"></div>

👉 결과: bottom fragment만 가져오며, chatbot은 불러오지 않음.

3. 팁

1. 파일 안에 footer, script, modal 등 여러 섹션이 있을 땐 fragment 방식(::bottom)이 유지보수에 좋음.
2. 단일 블록만 존재하는 단순 템플릿이라면 fragment 없이 써도 무방.
3. 프로젝트 규모가 커질수록 fragment 방식 권장.