Thymeleaf 기능 - 템플릿 조각, 템플릿 레이아웃

웹 페이지를 개발할 때는 공통 영역이 많이 있습니다.

예를들어서 웹페이지의 상단 영역이나 하단 영역, 좌측 카테고리 등등 여러 페이지에서 공통으로 사용하는 영역들이 있어요.

이런 부분을 코드를 복사해서 사용한다면 변경시 여러 페이지를 다 수정해야 하기 때문에 상당히 비효율적입니다. 타임리프는 이런 문제를 해결하기 위해 템플릿 조각과 레이아웃 기능을 지원합니다.

템플릿 조각

@Controller
@RequestMapping("/template")
public class TemplateController {

    @GetMapping("/fragment")
    public String template()
    {
        return "template/fragment/fragmentMain";
    }

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>

fragmentMain.html


<!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:insert="~{template/fragment/footer :: copyParam ('카카', '라모스')}">하이요</div>
    <div th:replace="~{template/fragment/footer :: copyParam ('데이터1', '데이터 2')}"></div>
  </body>
</html>

th:fragment가 있는 태그는 다른 곳에 포함되는 코드 조각으로 이해하면 됩니다.

th:insert="~{.../footer :: copy}
- footer.html의 th:fragment="copy" 로 지정된 부분을 현재 태그를 포함해서 사용합니다.

th.replce = "~{.../footer :: copy}
- footer.html의 th:fragmet="copy" 로 지정된 부분을 현재 태그를 대체해서 사용합니다. ( 위 경우 <div> </div> 가 <footer> </footer> 로 대체 )
부분 포함 단순 표현식
- <div th:replace="template/fragment/footer :: copy"></div>
  - ~을 사용하는게 원칙이지만 템플릿 조각을 사용하는 코드가 단순하면 ~을 생략할 수 있습니다.
파라미터 사용
- <div th:insert(replace) = "~{template/fragment/footer :: copyParam('데이터1','데이터2')}"></div>
  - 다음과 같이 파라미터 또한 렌더링해서 사용할 수 있습니다.

<footer th:fragment="copyParam (param1, param2)">
    <p>파라미터 자리 입니다.</p>
    <p th:text="${param1}"></p> <p th:text="${param2}"></p>
</footer>

⌃ footer.html

최종 뷰 템플릿 소스코드

템플릿 레이아웃

이전에는 일부 코드 조각을 가지고 와서 사용했다면, 이번에는 개념을 더 확장해서 코드 조각을 레이아웃에 넘겨서 사용해보겠습니다.

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

@GetMapping("/layout")
public String layout()
{
    return "template/layout/layoutMain";
}

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>

layoutMain.html

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

common_header(~{::title},~{::link}) 이 부분이 핵심입니다.

::title은 현재 페이지의 title 태그들을 전달합니다.
::link는 현재 페이지의 link 태그들을 전달합니다.

1. layoutMain 뷰 템플릿에 head부분이 base.html의 common_header의 타이틀과 링크로 대체되어 있습니다.

따라서 <title>이 붙은 메인 타이틀 자리에 base의 레이아웃 타이틀이 들어가고 <link> 가 붙은 부분에는 base의 공통 주석 링크가 들어갑니다.

소스코드를 보면

1. layoutMain을 호출했더니 template/layout/base 의 common_header의 title과 link를 전달해주고 리턴된 결과를 <head> 태그에 사용한다고 합니다.

2. 넘겨 주면 "레이아웃 타이틀" -> "메인 타이틀" 로 변경되고 중간의 공통 부분은 그대로, links로 전달받은 부분은 link로 전달된 부분으로 대체된 결과가 layoutMain의 head 태그에서 사용됩니다.

이번에는 <head> 에서 <html>까지 확장해보겠습니다.

@GetMapping("/layoutExtend")
public String layoutExtends()
{
    return "template/layoutExtend/layoutExtendMain";
}

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>

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>

동작 원리

1. <html> 레벨에서 내부 title과 section태그를 layoutfile에 전달해줍니다.

2. 전달받은 layoutFile의 title, content 태그를 전달받은 title과 section태그로 변경해줍니다.

3. <html> 레벨을 다시 layoutExtendMain에 전달해줍니다.

저작자표시

'📕 Backend > Thymeleaf Template' 카테고리의 다른 글

Thymeleaf - 스프링 통합 기능 (0)	2023.03.19
Thymeleaf 기능 - 기본 (0)	2023.03.17
Spring MVC - 웹 페이지 만들기 with Thymeleaf (0)	2023.03.15

블로그의 정보

Study Repository

rlaehddnd0422

Thymeleaf 기능 - 템플릿 조각, 템플릿 레이아웃

템플릿 조각

템플릿 레이아웃

'📕 Backend > Thymeleaf Template' 카테고리의 다른 글

블로그의 정보

활동하기

티스토리툴바

템플릿 조각

템플릿 레이아웃

'📕 Backend > Thymeleaf Template' 카테고리의 다른 글

블로그의 정보

활동하기

공유하기

다른 글

티스토리툴바