본문 바로가기
Spring 이해하기

Thymeleaf CheatSheet - 2 (template layout)

by simplify-len 2021. 9. 6.

공통된 영역은 따로 분리해서 개발해야 한다. 그런 부분에 대한 처리가 바로 템플릿 레이아웃이다.

3가지 방식이 있다.

1. 템플릿 조각

th:fragment 태그의 의미는 다른 곳에 포함되는 코드 조각이라 이해하면 된다.

어떻게 사용하는가?

// 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 에서 2개의 fragment 를 copy 와copyParam 선언했습니다. 그럼 선언한 fragment 를 사용한 부분은 다음과 같습니다.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h1>부분 포함</h1>
<h2>부분 포함 insert</h2>
<div th:insert="~{template/fragment/footer :: copy}"></div>

<h2>부분 포함 replace</h2>
<div th:replace="~{template/fragment/footer :: copy}"></div>

<h2>부분 포함 단순 표현식</h2>
<div th:replace="template/fragment/footer :: copy"></div>

<h1>파라미터 사용</h1>
<div th:replace="~{template/fragment/footer :: copyParam ('데이터1', '데이터2')}"></div>

</body>
</html>
  • ~{...} 를 사용
  • <div th:insert="~{template/fragment/footer :: copy}"></div> 와 같이 footer :: copy 사용
  • insert 와 replace 의 차이는 현재 태그가 어떻게 되는지에 대한 차이
<body><h1>부분 포함</h1>
<h2>부분 포함 insert</h2>
<div><footer> 푸터 자리 입니다.</footer></div>

<h2>부분 포함 replace</h2>
<footer> 푸터 자리 입니다.</footer>

<h2>부분 포함 단순 표현식</h2>
<footer> 푸터 자리 입니다.</footer>

<h1>파라미터 사용</h1>
<footer>
    <p>파라미터 자리 입니다.</p>
    <p>데이터1</p>
    <p>데이터2</p>
</footer>
</body>

2. 유연한 레이아웃

앞서 작업한 내역은 일부 코드 조각을 가지고와서 사용했다면, 이번에는 코드 조각을 레이아웃에 넘겨서 사용하는 방법

예를 들어 <head> 에 공통으로 사용하는 css, javascript 같은 정보들이 있는데, 이러한 공통 정보을 한 곳에 모아두고, 공통으로 사용하지만, 각 페이지마다 필요한 정보를 더 추가해 사용하고 싶을 경우, 아래와 같이 한다.

/resources/templates/template/layout/base.html

<html xmlns:th="http://www.thymeleaf.org">
<!--<head th:fragment="common_header(title,links)">-->
<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>
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<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>
<body> 메인 컨텐츠</body>
</html>

결과

<!DOCTYPE html>
<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>
<body> 메인 컨텐츠</body>
</html>
  • common_header(~{::title}, ~{::link}) 이 부분이 핵심
    • ::title 은 현재 페이지의 title 태그들을 전달
    • ::link 는 현재 페이지의 link 태그들을 전달

쉽게 이야기하면, 레이아웃 개념은 그대로 두고, 그 레이아웃에 필요한 코드 조각을 전달해서 완성하는 것

3. 레이아웃 상속

2번 유연한 레이아웃에서는 <head> 정도에만 적용하는 것이였고, 이번에는 <html> 전체에 적용할 수 있다.

resources/templates/template/layoutExtend/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>
layoutExtendMain.html

<!DOCTYPE html>
<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>

결과

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

<footer> 레이아웃 푸터</footer>
</body>
</html>

자세한 소스 코드 thymeleaf-basic

저작자표시 비영리

'Spring 이해하기' 카테고리의 다른 글

대체 application.properties 는 어떻게 동작되는 거지?  (0) 2022.09.03
Thymeleaf CheatSheet - 1 (basic)  (0) 2021.09.06
SpringMVC 에서 말하는 MessageConverter 코드로 이해하기  (6) 2021.08.15
[JPA] JoinColumn vs mappedBy  (0) 2021.06.13
인터페이스 빈 주입을 사용해야 하는 이유  (1) 2021.06.12

관련글

댓글

티스토리툴바