웹 페이지를 개발할 때 공통 영역이 많이 있다.
이런 부분을 코드를 복사해서 사용한다면 변경 시 여러 페이지를 다 수정해야 하므로 상당히 비효율 적이다.
타임리프는 이런 문제를 해결하기 위해 템플릿 조각과 레이아웃 기능을 지원한다.
1. 템플릿 조각
템플릿 조각은 일부 코드 조각을 가지고 와서 사용한다.
th:fragment
다른 곳에 포함되는 코드 조각이다.
<!-- footer.html -->
<footer th:fragment="copy">
푸터 자리 입니다.
</footer>
<footer th:fragment="copyParam (param1, param2)">
<p>파라미터 자리 입니다.</p>
<p th:text="${param1}"></p>
<p th:text="${param2}"></p>
</footer>(1) 부분 포함 insert
- th:insert를 사용하면 현재 태크 div 내부에 추가한다.
<div th:insert="~{template/fragment/footer :: copy}"></div>
<!-- 결과 -->
<div>
<footer>
푸터 자리 입니다.
</footer>
</div>template/fragment/footer :: copy =>
template/fragment/footer.html 템플릿에 있는 th:fragment="copy"라는 부분을 템플릿 조각으로 가져와서 사용한다는 의미이다.
(2) 부분 포함 replace
- th:replace를 사용하면 현재 태그 div를 대체한다.
<div th:replace="~{template/fragment/footer :: copy}"></div>
<!-- 결과 -->
<footer>
푸터 자리 입니다.
</footer>(3) 부분 포함 단순 표현식
- ~{...}를 사용하는 것이 원칙이지만 템플릿 조각을 사용하는 코드가 단순하면 이 부분을 생략 가능하다.
<div th:replace="~{template/fragment/footer :: copy}"></div>
<!-- 결과 -->
<footer>
푸터 자리 입니다.
</footer>(4) 파라미터 사용
- 파라미터를 전달해서 동적으로 조각을 렌더링 할 수 있다.
<div th:replace="~{template/fragment/footer :: copyParam ('데이터1', '데이터2')}"></div>
<!-- 결과 -->
<footer>
<p>파라미터 자리 입니다.</p>
<p>데이터1</p>
<p>데이터2</p>
</footer>
2. 템플릿 레이아웃
템플릿 레이아웃은 레이아웃을 만들어 두고 코드 조각을 레이아웃에 넘겨서 사용한다.
(1) <head>에 적용
- <head>에 공통으로 사용하는 css, javascript 같은 정보들이 있는데, 이러한 공통 정보들을 한 굿에 모아 두고, 공통으로 사용하지만, 각 페이지마다 필요한 정보를 더 추가해서 사용하고 싶은 경우
<!-- 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>- base.html으로 공통 정보를 작성한다.
<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>- common_header(~{::title}, ~{::link})
- ::title은 현재 페이지의 title 태그들을 전달한다.
- ::link는 현재 페이지의 link 태그들을 전달한다.
<!-- 결과 -->
<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>- 메인 타이들이 전달한 부분으로 교체되었다.
- 공통부분은 그대로 유지되고, 추가 부분에 전달한 <link>들이 포함된 것을 확인할 수 있다.
(2) <html> 전체에 적용
- <head> 뿐만 아니라 <html> 전체에 적용할 수도 있다.
<!-- base.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>에 th:fragment 속성이 정의되어 있다.
- 레이아웃 파일을 기본으로 하고 여기에 필요한 내용을 전달해서 부분 부분 변경하는 것으로 이해하면 된다.
<html th:replace="~{template/layoutExtend/layoutFile :: layout(~{::title}, ~{::section})}"
xmlns:th="http://www.thymeleaf.org">
<head>
<title>메인 페이지 타이틀</title>
</head>
<body>
<section>
<p>메인 페이지 컨텐츠</p>
<div>메인 페이지 포함 내용</div>
</section>
</body>
</html>- <html> 전체가 base.html으로 변경되면서 필요한 인자를 전달한다.
<!-- 결과 -->
<html>
<head>
<title>메인 페이지 타이틀</title>
</head>
<body>
<h1>레이아웃 H1</h1>
<section>
<p>메인 페이지 컨텐츠</p>
<div>메인 페이지 포함 내용</div>
</section>
<footer>
레이아웃 푸터
</footer>
</body>
</html>
3. 정리
- 템플릿 레이아웃은 앞서 배운 코드 조각을 조금 더 적극적으로 사용하는 방식이다.
- 템플릿 조각
- 자주 사용되는 공통의 코드 조각을 만들어 두고 필요할 때 불러와서 사용
- 템플릿 레이아웃
- 공통의 레이아웃을 만들고 여러 코드 조각을 넘긴다.
반응형
'Thymeleaf' 카테고리의 다른 글
| [Thymeleaf] 체크박스 (0) | 2022.01.28 |
|---|---|
| [Thymeleaf] 입력 Form 처리 (0) | 2022.01.26 |
| [Thymeleaf] 자바스크립트 인라인 (0) | 2022.01.25 |
| [Thymeleaf] 주석, 블록 (th:block) (0) | 2022.01.25 |
| [Thymeleaf] 조건 (if, unless, switch) (0) | 2022.01.25 |
댓글