웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
자바 템플릿 엔진으로 사용되는 타임리프(thymeleaf)에서 html 파일을 include, 추가하는 방법에 대하여 자세히 알아봅니다.
# 타임리프(tymeleaf)에 html 파일 추가하기
다른 템플릿 언어들 처럼 thymeleaf에도 html 파일을 원하는 곳에 include, 추가 할 수 있습니다. 예를들어 공통적으로 사용되는 header나 footer 등을 추가할 수 있죠.
먼저 공통 파일을 추가하기 위해서는 다음의 두 가지 방법이 있습니다.
th:replace="추가할 파일"
th:insert="추가할 파일"
두 가지 모두 파일 추가에 사용됩니다.
! th:replace 사용하기
아래는 th:replace를 사용하여 header.html 파일을 추가하였습니다.
위 코드를 추가하면 div 태그 내부에 header.html이 추가되어 나타나게 됩니다.
@ header.html
참고로 추가되는 파일에는 오직 단 하나의 최상위 태그를 가집니다. 즉 여러 개의 동일 레벨의 태그를 사용하면 에러가 발생합니다.
( X ) 잘못된 파일 추가
( O ) 올바른 파일 추가
아래는 div 단 하나의 최상위 태그를 가지고 있습니다.
! th:insert 파일 추가하기
이 방법 역시 파일을 추가하는데 동일하게 사용됩니다.
동일하게 header.html이 추가됩니다.
! 추가된 랩퍼(Wrapper) 태그를 삭제하는 방법은?
파일 추가시 th:remove를 사용하여 추가할 때 사용된 태그를 안보이도록 삭제할 수 있습니다.
이제 추가할 때 사용된 div는 사라지고 header 내부만 추가되어 나타나게 됩니다.
! 참고사항
참고로, 추가하는 태그 내부에 엘리먼트 요소 등을 사용할 수 있습니다. 즉 아래처럼 사용할 수 있죠.
이처럼 내부에 a 태그를 사용할 수 있습니다. 이런 이유는 표현식을 사용해 th:insert를 사용해 추가하는 경우 추가하지 않는 분기분 형태를 사용할 수 있기 때문입니다. 즉 insert 되지 않으면 a 태그의 링크가 사용되는 것입니다.
또 다른 방법으로 다른 두 개의 include 파일을 선택해 사용할 수도 있습니다.
이처럼 약식 분기문을 표현식으로 사용해 만약 #authInfo.isAdmin()가 true인 경우에는 header-admin.html 파일을 추가하고 아닌 경우 'header.html을 추가하는 방법입니다.
여기까지 자바 템플릿, 타임리프의 파일 추가, include, insert 방법에 대하여 알아봤습니다. 더 자세한 문서는 아래의 사이트에서 확인할 수 있습니다.
타임리프(thymeleaf) 바로가기 >
https://www.thymeleaf.org/doc/
# 타임리프(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>
<span>Header Tag !!!</span>
</header>
참고로 추가되는 파일에는 오직 단 하나의 최상위 태그를 가집니다. 즉 여러 개의 동일 레벨의 태그를 사용하면 에러가 발생합니다.
( X ) 잘못된 파일 추가
<div>1</div>
<div>2</div>
<div>3</div>
<div>2</div>
<div>3</div>
( O ) 올바른 파일 추가
<div>
<div>1</div>
<div>2</div>
<div>3</div>
</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 href="#">TEST</a>
</div>
이처럼 내부에 a 태그를 사용할 수 있습니다. 이런 이유는 표현식을 사용해 th:insert를 사용해 추가하는 경우 추가하지 않는 분기분 형태를 사용할 수 있기 때문입니다. 즉 insert 되지 않으면 a 태그의 링크가 사용되는 것입니다.
또 다른 방법으로 다른 두 개의 include 파일을 선택해 사용할 수도 있습니다.
<div th:insert="/header :: ${#authInfo.isAdmin()} ? 'header-admin' : 'header'">
<a href="#">TEST</a>
</div>
<a href="#">TEST</a>
</div>
이처럼 약식 분기문을 표현식으로 사용해 만약 #authInfo.isAdmin()가 true인 경우에는 header-admin.html 파일을 추가하고 아닌 경우 'header.html을 추가하는 방법입니다.
여기까지 자바 템플릿, 타임리프의 파일 추가, include, insert 방법에 대하여 알아봤습니다. 더 자세한 문서는 아래의 사이트에서 확인할 수 있습니다.
타임리프(thymeleaf) 바로가기 >
https://www.thymeleaf.org/doc/
아래의 글도 찾고 계시지 않나요?
