🗂️ Etc

[Thymeleaf] Fragment vs thymeleaf-layout-dialect 차이

loose 2022. 6. 18. 23:02
반응형

둘다 공통 Layout 처리를 하기 위해 사용한다.

 

Fragment

 

1. index.html (스프링으로부터 redirect 된 실제 컨텐츠 페이지)

<html>
	<div th:replace="/fragments/header.html :: headerFragment"></div>
	컨텐츠 내용
</html>

2. header.html

<div th:fragment="headerFragment">
	공통 헤더 파일 추가
</div>

 

index.html에 위와 같은 코드를 적으면 header.html의 fragment 값이 headerFragment인 것을 가져오는 코드.

 

thymeleaf-layout-dialect

 

Maven Or Gradle에 thymeleaf-layout-dialect 의존성을 추가해서 사용한다.

 

1. index.html (실제 컨텐츠 페이지)

<html>
	<header th:replace="fragments/header :: headerFragment"></header>
  
	<div layout:fragment="content"></div>

	<footer th:replace="fragments/footer :: footerFragment"></footer>
</html>

2. 스프링으로부터 redirect 된 컨텐츠 페이지

<html>
	<div layout:fragment="content">
		컨텐츠 내용
	</div>
</html>

 

스프링에서 redirect 된 컨텐츠 페이지에 layout:fragment="content"를 적으면 index.html의 layout:fragment="content" 부분에 치환된다.

 

index.html이 실질적인 컨텐츠 페이지이고 스프링으로부터 redirect된 컨텐츠 페이지의 내용을 index.html에 치환시켜 넘기는 방식이다.

 

컨텐츠 페이지에 하나하나 공통처리를 해주지 않아도 공통 처리를 할 수 있기 때문에 기존 JSP + Spring에서 썼던 Tiles 처럼 처리가 가능하다.

 

다만 개인적으로는 Tiles든 thymeleaf-layout-dialect든 이러한 설정 자체가 의존성이 강해져 후에 유지보수 자체가 어려워지는 경우가 좀 많아서 개인 프로젝트에선 Fragment 기능만 쓰려고 한다.

728x90