자바 템플릿 엔진으로 사용되는 타임리프(thymeleaf)에서 html 파일을 include, 추가하는 방법에 대하여 자세히 알아봅니다.



# 타임리프(tymeleaf)에 html 파일 추가하기
다른 템플릿 언어들 처럼 thymeleaf에도 html 파일을 원하는 곳에 include, 추가 할 수 있습니다. 예를들어 공통적으로 사용되는 header나 footer 등을 추가할 수 있죠.

먼저 공통 파일을 추가하기 위해서는 다음의 두 가지 방법이 있습니다.

th:replace="추가할 파일"
th:insert="추가할 파일"


두 가지 모두 파일 추가에 사용됩니다.


! th:replace 사용하기
아래는 th:replace를 사용하여 header.html 파일을 추가하였습니다.
<div th:replace="/header :: header"></div>

위 코드를 추가하면 div 태그 내부에 header.html이 추가되어 나타나게 됩니다.
@ header.html
<header>
  <span>Header Tag !!!</span>
</header>

참고로 추가되는 파일에는 오직 단 하나의 최상위 태그를 가집니다. 즉 여러 개의 동일 레벨의 태그를 사용하면 에러가 발생합니다.

( X ) 잘못된 파일 추가
<div>1</div>
<div>2</div>
<div>3</div>

( O ) 올바른 파일 추가
<div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

아래는 div 단 하나의 최상위 태그를 가지고 있습니다.


! th:insert 파일 추가하기
이 방법 역시 파일을 추가하는데 동일하게 사용됩니다.
<div th:insert="/header :: header"></div>

동일하게 header.html이 추가됩니다.


! 추가된 랩퍼(Wrapper) 태그를 삭제하는 방법은?

파일 추가시 th:remove를 사용하여 추가할 때 사용된 태그를 안보이도록 삭제할 수 있습니다.
<div th:replace="/header :: header" th:remove="tag"></div>

이제 추가할 때 사용된 div는 사라지고 header 내부만 추가되어 나타나게 됩니다.


! 참고사항

참고로, 추가하는 태그 내부에 엘리먼트 요소 등을 사용할 수 있습니다. 즉 아래처럼 사용할 수 있죠.
<div th:insert="/header :: header">
  <a href="#">TEST</a>
</div>

이처럼 내부에 a 태그를 사용할 수 있습니다. 이런 이유는 표현식을 사용해 th:insert를 사용해 추가하는 경우 추가하지 않는 분기분 형태를 사용할 수 있기 때문입니다. 즉 insert 되지 않으면 a 태그의 링크가 사용되는 것입니다.

또 다른 방법으로 다른 두 개의 include 파일을 선택해 사용할 수도 있습니다.
<div th:insert="/header :: ${#authInfo.isAdmin()} ? 'header-admin' : 'header'">
  <a href="#">TEST</a>
</div>

이처럼 약식 분기문을 표현식으로 사용해 만약 #authInfo.isAdmin()가 true인 경우에는 header-admin.html 파일을 추가하고 아닌 경우 'header.html을 추가하는 방법입니다.

여기까지 자바 템플릿, 타임리프의 파일 추가, include, insert 방법에 대하여 알아봤습니다. 더 자세한 문서는 아래의 사이트에서 확인할 수 있습니다.

타임리프(thymeleaf) 바로가기 >
https://www.thymeleaf.org/doc/