Thymeleaf의 decorate 속성은 템플릿 레이아웃을 적용할 때 사용하는 기능으로, 페이지의 구조와 공통 레이아웃을 효율적으로 관리하는 데 도움이 됩니다. 이 기능은 Thymeleaf Layout Dialect라는 확장 라이브러리에서 제공하는 것으로, 기본적으로 여러 템플릿에서 공통적으로 사용하는 레이아웃 파일을 설정할 수 있습니다. 아래는 layout:decorate에 대한 설명입니다.
1. layout:decorate의 기본 개념
layout:decorate는 각 페이지 템플릿에서 layout:decorate="경로"를 통해 특정 레이아웃 템플릿을 지정하는 방식입니다. 이 기능을 통해 각 개별 페이지에서 공통 레이아웃을 사용할 수 있으며, 전체 구조는 레이아웃 템플릿에서 정의된 구조를 따르게 됩니다.
예를 들어, 레이아웃 템플릿을 설정하면, 각 페이지의 헤더, 푸터, 네비게이션 메뉴와 같은 공통 요소를 한 곳에서 관리할 수 있습니다. 즉, 페이지마다 중복되는 HTML 코드를 줄이고, 모든 페이지에 동일한 레이아웃을 쉽게 적용할 수 있습니다.
2. layout:decorate 사용법
각 개별 템플릿 파일에서는 layout:decorate 속성을 사용해 해당 파일이 어떤 레이아웃 템플릿을 사용할지 지정할 수 있습니다. 보통 layout:decorate는 HTML html 태그에 사용합니다.
<!DOCTYPE html>
<html lang="en"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{common/layout/defaultLayout}">
<body>
<section layout:fragment="Content">
<!-- 본문 내용 -->
</section>
</body>
</html>위 코드에서 layout:decorate="~{common/layout/defaultLayout}" 속성은 test.html 템플릿이 defaultLayout.html 파일을 레이아웃으로 사용하도록 설정합니다.
3. 레이아웃 템플릿 (defaultLayout.html) 설정
defaultLayout.html은 레이아웃 구조를 정의하는 템플릿으로, 공통으로 사용되는 HTML 구조와 각 페이지에서 대체될 영역을 정의합니다. 이 레이아웃 템플릿에서는 layout:fragment를 사용하여 각 페이지에서 재정의될 수 있는 영역을 설정합니다.
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<title>공통 레이아웃 제목</title>
</head>
<body>
<header>
<h1>헤더</h1>
</header>
<main>
<div layout:fragment="Content">
<!-- 각 페이지에서 들어갈 본문 내용 -->
</div>
</main>
<footer>
<p>푸터</p>
</footer>
</body>
</html>위 defaultLayout.html에는 layout:fragment="Content"라는 프래그먼트가 포함되어 있습니다. 개별 템플릿 파일에서 layout:fragment="Content" 영역을 재정의하여, 본문 내용이 이 위치에 들어가도록 설정할 수 있습니다.
4. 파라미터 전달 및 기본값 설정
개별 템플릿에서 레이아웃 템플릿으로 파라미터를 전달하려면 th:with를 사용합니다. 예를 들어, 페이지 제목이나 색상과 같은 정보를 전달할 수 있습니다.
- 개별 템플릿 (test.html)에서 th:with를 사용하여 파라미터를 전달:
<!DOCTYPE html>
<html lang="en"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{common/layout/defaultLayout}"
layout:fragment="Content"
th:with="pageTitle='Test Page', backgroundColor='#fff'">
<body>
<!-- 본문 내용 -->
</body>
</html>- 레이아웃 템플릿 (defaultLayout.html)에서 파라미터를 받아서 사용:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<title th:text="${pageTitle}">기본 제목</title>
</head>
<body>
<div id="content-wrapper" th:style="'background-color: ' + (${backgroundColor != null} ? ${backgroundColor} : '#111111')">
<section layout:fragment="Content">
<!-- 개별 템플릿의 본문 내용이 여기에 렌더링됨 -->
</section>
</div>
</body>
</html>위 방식으로 test.html에서 defaultLayout.html로 pageTitle과 backgroundColor 파라미터를 전달하고, 이를 활용할 수 있습니다.
5. 정리
- layout:decorate: 개별 템플릿에 공통 레이아웃을 적용하도록 설정하는 속성입니다.
- layout:fragment: 레이아웃 템플릿에서 재정의할 수 있는 영역을 설정할 때 사용합니다.
- th:with: 개별 템플릿에서 레이아웃 템플릿으로 값을 전달할 때 사용합니다.
이 방식으로 layout:decorate를 사용하면 유지보수가 쉬운 템플릿 구조를 만들 수 있습니다.