타임리프(thymeleaf) 템플릿조각 / 템플릿 레이아웃
타임리프를 이용하면 여러 페이지에 반복적으로 사용되는 내용을 쉽게 관리할 수 있다
템플릿 조각
템플릿 조각 생성
<footer th:fragment="copy">
푸터 자리 입니다.
</footer>
<footer th:fragment="copyParam (param1, param2)">
<p>파라미터 자리 입니다.</p>
<p th:text="${param1}"></p>
<p th:text="${param2}"></p>
</footer>
푸터 태그로 다른 곳에 포함시킬 수 있는 코드 조각을 생성한다
th:fragment 속성에 지정된 이름을 이용해 다른 파일에서 사용한다
두번째와 같이 파라미터도 사용가능하다
템플릿 조각 사용
insert
th:insert를 이용하면 사용한 자리에 그대로 템플릿 조각을 삽입한다.
<h2>부분 포함 insert</h2>
<div th:insert="~{template/fragment/footer :: copy}"></div>
~{}는 fragment로 지정한 템플릿을 사용할 때 쓰이는 문법이다
~{} 내부에 경로 :: fragment이름 으로 사용한다
~{}는 생략 가능해서 <div th:insert="template/fragment/footer :: copy"></div> 로 사용할 수도 있다
위 코드 실행후 소스 보기를 하면 다음과 같이 div 태그는 그대로 있고 footer가 div태그 안에 들어가는 것을 볼 수 있다.
<h2>부분 포함 insert</h2>
<div><footer>
푸터 자리 입니다.
</footer></div>
replace
replace를 사용하면 replace가 사용된 태그가 템플릿 조각으로 대체된다
<h2>부분 포함 replace</h2>
<div th:replace="~{template/fragment/footer :: copy}"></div>
위 코드 실행 후 소스보기를 하면 insert와 다르게 div태그가 사라지고 footer만 남아있는 것을 볼 수 있다
<h2>부분 포함 replace</h2>
<footer>
푸터 자리 입니다.
</footer>
파라미터 사용
위에서 생성한 파라미터가 있는 템플릿 조각은 다음과 같이 사용할 수 있다.
<h1>파라미터 사용</h1>
<div th:replace="~{template/fragment/footer :: copyParam ('데이터1', '데이터2')}"></div>
위 코드 실행 후 소스보기를 하면 다음과 같이 템플릿조각의 형식 그대로 파라미터에 넣어준 값들이 잘 적용됨을 확인할 수 있다
<h1>파라미터 사용</h1>
<footer>
<p>파라미터 자리 입니다.</p>
<p>데이터1</p>
<p>데이터2</p>
</footer>
템플릿 레이아웃
템플릿 레이아웃 생성
템플릿 레이아웃은 footer태그에 fragment 속성을 추가한 템플릿 조각과는 다르게 html의 head 태그에 fragment 속성을 추가하여 전체 파일을 템플릿으로 사용하게 한다.
<head th:fragment="common_header(title,links)">
<title th:replace="${title}">레이아웃 타이틀</title>
<!-- 공통 -->
<link rel="stylesheet" type="text/css" media="all" th:href="@{/css/awesomeapp.css}">
<link rel="shortcut icon" th:href="@{/images/favicon.ico}">
<script type="text/javascript" th:src="@{/sh/scripts/codebase.js}"></script>
<!-- 추가 -->
<th:block th:replace="${links}" />
</head>
위 파일은 head태그에 th:fragment를 사용하여 common_header라는 이름을 설정하고 title과 links를 파라미터로 전달받게 하였다
title태그에 파라미터를 사용하여 전달받은 title로 대체해주고, 공통부분은 그대로 사용하고 추가 부분에 전달 받은 link태그를 사용해 대체해준다
템플릿 레이아웃 사용
<head th:replace="template/layout/base :: common_header(~{::title},~{::link})">
<title>메인 타이틀</title>
<link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
<link rel="stylesheet" th:href="@{/themes/smoothness/jquery-ui.css}">
</head>
위와 같이 head에 th:replace를 사용해 경로와 fragment이름으로 레이아웃을 불러온다
~{::태그}는 현재 파일에 있는 태그를 모두 전달해주는 역할을 한다
<head>
<title>메인 타이틀</title>
<!-- 공통 -->
<link rel="stylesheet" type="text/css" media="all" href="/css/awesomeapp.css">
<link rel="shortcut icon" href="/images/favicon.ico">
<script type="text/javascript" src="/sh/scripts/codebase.js"></script>
<!-- 추가 -->
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/themes/smoothness/jquery-ui.css">
</head>
그래서 실행 후 소스코드를 보면 title이 전달되어 변경되었고, 추가 부분에도 전달된 link들이 잘 적용되어있는것을 볼 수 있다
추가로 head가 아닌 html 태그에 fragment를 사용하여 html파일 전체를 템플릿 레이아웃 처럼 사용하는 것도 가능하다
<!DOCTYPE html>
<html th:fragment="layout (title, content)" xmlns:th="http://www.thymeleaf.org">
<head>
<title th:replace="${title}">레이아웃 타이틀</title>
</head>
<body>
<h1>레이아웃 H1</h1>
<div th:replace="${content}">
<p>레이아웃 컨텐츠</p>
</div>
<footer>
레이아웃 푸터
</footer>
</body>
</html>
위와 같이 html전체를 레이아웃으로 하면 body태그 내에 있는 ${content} 부분도 파라미터로 전달받아 대체하는 것이 가능해진다.
오늘 정리한 내용처럼 타임리프에서 제공하는 템플릿 기능을 사용하면 여러페이지의 공통된 내용을 하나의 파일에서 관리할 수 있다는 장점이 있다