Spring MVC - 타임리프(Thymeleaf) 템플릿 조각과 레이아웃 (th:fragment, th:insert, th:replace)

Spring/Spring MVC 2022. 2. 3. 14:25

타임리프(Thymeleaf) 템플릿 조각과 레이아웃

웹 페이지를 개발할 때는 공통 영역이 많이 들어있다. 예를 들어 상단 메뉴, 하단 홈페이지 정보, 좌측 카테고리 등 여러 페이지에서 공통으로 사용하는 영역들이 있다. 이런 공통 영역 부분들을 페이지마다 코드 작성을 하면 코드 중복이 일어나고, 수정을 하면 공통 영역을 사용하는 모든 페이지를 각각 수정해야 하는 번거로움이 생긴다. 타임리프는 이러한 문제를 해결하기 위해 템플릿 조각과 레이아웃 기능을 지원한다.

타임리프(Thymeleaf) 템플릿 조각

일부 코드를 가져와서 사용하는 방법이다.

템플릿 조각을 이용하기 위해 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>

해당 <footer> 태그들은 다른 HTML 파일에서 th:insert, th:replace 를 통해 사용할 수 있다.

th:insert="~{ [ 템플릿 조각 경로 ] :: 조각명}"

insert는 현재 태그를 유지하면서 템플릿 조각을 가져오는 방법

<div th:insert="~{fragment/footer :: copy}"></div>

서버를 가동시켜 웹브라우저에서 HTML의 소스 코드를 보면 다음과 같다.

<div><footer>
    푸터 자리 입니다.
</footer></div>

위 코드를 보면 <div> 태그를 유지하면서 템플릿 조각을 가져왔다.

th:replace="~{ [ 템플릿 조각 경로 ] :: 조각명}"

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>

타임리프(Thymeleaf) 레이아웃

템플릿 조각은 일부 코드 조각을 가지고 와서 사용하는 방법이다. 이 개념을 더 확장해서 코드 조각을 레이아웃에 넘겨서 사용하는 방법이 있다.

템플릿 레이아웃1 - <head>

우선 공통 레이아웃 base.html 파일을 만들어 준다.

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에 전달한다. base.html으로 전달받은 태그들은 각 태그의 th:replace에 의해 대체가 이루어진다. 그리고 layoutMain.html의 <head> 태그는 th:replace에 의해 base.html의 <head>로 대체 된다.

<순서>

th:replace="fragment/layout/base :: common_header(~{::title},~{::link})" 실행
- base.html의 th:fragment="common_header(title, links)" 실행
- layoutMain.html의 <title>, <link> 전달
base.html에서 전달 받은 <title>, <link>는 th:replace에 의해 대체
layoutMain.html의 <head> 태그의 th:replace에 의해 base.html의 <head>로 대체가 됨

템플릿 레이아웃2 - <html>

레이아웃 layoutFile.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> 태그에 th:replace 를 이용하여 HTML 전체를 레이아웃 적용할 수 있다.

<!DOCTYPE html>
<html th:replace="~{fragment/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의 소스 코드를 보면 다음과 같다.

<!DOCTYPE html>
<html>
<head>
    <title>메인 페이지 타이틀</title><title>메인 페이지 타이틀</title>
</head>
<body>
<h1>레이아웃 H1</h1>
<section>
  <p>메인 페이지 컨텐츠</p>
  <div>메인 페이지 포함 내용</div>
</section><section>
  <p>메인 페이지 컨텐츠</p>
  <div>메인 페이지 포함 내용</div>
</section>
<footer>
    레이아웃 푸터
</footer>
</body>
</html>

layout(~{::title}, ~{::section}) 을 통해 레이아웃에 <title> 태그와 <section> 태그를 전달한다. 전달받은 태그들은 레이아웃에서 해당 태그에 대체되고, <html> 태그의 th:replace 에 의해 대체가 이루어진다.

저작자표시 비영리 변경금지

'Spring > Spring MVC' 카테고리의 다른 글

Spring MVC - 타임리프(Thymeleaf)을 사용한 단일 checkbox (0)	2022.02.04
Spring MVC - 타임리프(Thymeleaf)를 이용한 입력 폼(Form) 사용법 (0)	2022.02.04
Spring MVC - 타임리프(Thymeleaf) 블록과 자바스크립트 인라인 (0)	2022.02.03
Spring MVC - 타임리프(Thymeleaf) 반복 기능(th:each), 조건부 기능(th:if, th:unless, th:switch) (0)	2022.02.03
Spring MVC - 타임리프(Thymeleaf) 리터럴과 연산 (0)	2022.02.02

ABOUT ME

IT 개발자들의 울타리 IT 개발자들의 울타리

타임리프(Thymeleaf) 템플릿 조각과 레이아웃

타임리프(Thymeleaf) 템플릿 조각

타임리프(Thymeleaf) 레이아웃

'Spring > Spring MVC' 카테고리의 다른 글

티스토리툴바

ABOUT ME

타임리프(Thymeleaf) 템플릿 조각과 레이아웃

타임리프(Thymeleaf) 템플릿 조각

타임리프(Thymeleaf) 레이아웃

'Spring > Spring MVC' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바