타임리프 템플릿 조각과 레이아웃
- 웹 페이지 공통 영역 부분들을 페이지 마다 코드 작성을 하게되면 중복이 일어나고, 수정시 각각 수정해야하는 번거로움을 해결하기 위한 기능
타임리프(Tymeleaf) 템플릿 조각
footer.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<footer th:fragment="copy">
푸터 자리 입니다.
</footer>
<footer th:fragment="copyParam (param1, param2)">
<p>파라미터 자리 입니다.</p>
<p th:text="${param1}"></p>
<p th:text="${param2}"></p>
</footer>
</body>
</html>템플릿 조각을 사용하기 위해 위 html 파일을 만들어 준다.
해당 footer 태그들은 다른 HTML 파일에서 th:insert, th:replace를 통해 사용할 수 있다.
th:insert="~{[템플릿 조각 경로] :: 조각명}"
- 현재 태그를 유지하면서 템플릿 조각을 가져오는 방법
<div th:insert="~{fragment/footer :: copy}"></div>HTML 소스 코드를 서버를 가동시켜 확인하면,
<div><footer>
푸터 자리 입니다.
</footer></div>div 태그를 유지하면서 템플릿 조각을 가져온 것을 확인할 수 있다.
th:replace="~{[템플릿 조각 경로] :: 조각명}"
- 대체하여 템플릿 조각을 가져오는 방법
<div th:replace="~{fragment/footer :: copy}"></div>HTML 소스 코드를 서버를 가동시켜 확인하면,
<footer>
푸터 자리 입니다.
</footer>div가 사라지며 템플릿 조각을 가져온 것을 확인할 수 있다.
th:replace="~{[템플릿 조각 경로] :: 조각명('파라미터1','파라미터2',...)}"
- 템플릿 조각은 파라미터를 전달하여 동적으로 렌더링 할 수 있다.
<div th:replace="~{fragment/footer :: copyParam ('데이터1', '데이터2')}"></div>HTML 소스 코드를 서버를 가동시켜 확인하면,
<footer>
<p>파라미터 자리 입니다.</p>
<p>데이터1</p>
<p>데이터2</p>
</footer>타임리프(Tymeleaf) 레이아웃
- 템플릿 조각은 일부 코드를 가지고 와서 사용하는 방법이다. 이 개념을 더 확장하여 코드 조각을 헤이아웃에 넘겨서 사용할 수 있다.
base.html
<html xmlns:th="http://www.thymeleaf.org">
<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 태그 등에서 공통으로 사용하는 정보들은 한 곳에 모아서 사용하고, 각 페이지마다 각 태그에 필요한 정보를 추가해서 사용하는 방법
layoutMain.html
<head th:replace="fragment/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>HTML 소스 코드를 서버를 가동시켜 확인하면,
<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>common_header(~{::title},~{::link}) 을 통해 layoutMain.html의 title 태그와 link 태그를 base.html에 전달한다.
전달받은 태그들은 각 태그의 th:replace에 의해 대체가 이루어진다.
그리고 layoutMain.html의 head 태그는 th:rplace에 의해서 base.html의 head로 대체된다.
지극히 개인적인 내 개발스터디 공간