Spring MVC - Thymeleaf(2) Fragment,Layout

Sungjin·2021년 7월 24일

Spring

목록 보기

7/23

사용 이유

웹 페이지의 화면을 구성 할 때는 공통 영역이 많을 것.
그렇다면, 여기서 생각을 해보자!
공통적인 부분에서의 수정이 필요하다면 ??? 여러 HTML 파일들을 다 수정해야 된다는 이야기
혹시라도 HTML파일이 수 백개라면?? 생각만 해도 끔찍!
그래서, Thymeleaf는 공통영역을 처리하기 위해 템플릿 조각(fragment) 및 레이아웃 기능을 지원

템플릿 조각 - Fragment

th:fragment, th:insert, th:replace 사용

공통 영역 부분 - th:fragment

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <body>
	<footer th:fragment="first-footer">
    		<p>Hello Fragment!</p>
	</footer>
  </body>

공통 영역 활용 페이지 - th:insert, th:replace

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="UTF-8">
 		<title>Title</title>
	</head>
  
	<body>
		<h1>Sungjin's Velog</h1>
		<h2>insert</h2>
		<div th:insert="~{template/fragment/footer :: first-footer}"></div>
		<h2>replace</h2>
		<div th:replace="~{template/fragment/footer :: first-footer}"></div>
  	</body>
</html>

실행 결과

랜더링된 페이지 소스

여기서 확인할 수 있는 것은 th:insert는 기존 <div> 태그안에 삽입 되는 것을 보실 수 있고, th:replace는 아예 기존 <div> 태그를 대체하는 것을 보실 수 있습니다!

파라미터도 사용할 수 있습니다!

공통 영역 부분 - th:fragment

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <body>
	<footer th:fragment="paramFooter (param1, param2)">
    		<p th:text="${param1}"></p>
    		<p th:text="${param2}"></p>
	</footer>
  </body>

공통 영역 활용 페이지 - th:replace

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="UTF-8">
 		<title>Title</title>
	</head>
  
	<body>
		<h1>Sungjin's Velog</h1>
		<h2>insert</h2>
		<div th:replace="~{template/fragment/footer :: paramFooter ('Computer', 'Science')}">
    </div>
  	</body>
</html>

실행 결과

랜더링된 페이지 소스

이렇게 파라미터를 전달해서 동적으로 렌더링도 가능하게 되었습니다!

레이아웃

레이아웃은 템플릿 조각의 좀 더 확장된 버전이라고 보실 수 있습니다!
템플릿 조각은 공통된 영역을 조각 조각 불러와서 쓸 수 있었습니다.
레이아웃은 이를 확대해서 html태그 단위로도 사용 가능하며 사용 방식은 아예 레이아웃 페이지를 기본으로 하고
페이지 마다 필요한 내용,태그등이 있으면 레이아웃 페이지에 전달하여 전달된 내용들을 교체하여 화면에 뿌려준다.. 생각하시면 될 것 같습니다.

말로는 설명이 어려울 것 같으니 코드를 보시져!

layout File

<!DOCTYPE html>
<html th:fragment="layout (content1, content2)" xmlns:th="http://www.thymeleaf.org">
    <head>
        <title >Layout Title</title>
    </head>
    
    <body>
        <h1>Sungjin's Velog!</h1>
        <div th:replace="${content1}">
            <p>Content1</p>
        </div>
        <div th:replace="${content2}">
            <p>Content2</p>
        </div>
        
        <footer>
            Layout footer
        </footer>
    </body>
</html>

레이아웃을 사용하는 페이지

<!DOCTYPE html>
<html th:replace="~{template/layoutExtend/layoutFile :: layout(~{::h3},~{::h4})}"
      xmlns:th="http://www.thymeleaf.org">
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <h3>Hello</h3>
        <h4>I want to be a developer</h4>
    </body>
</html>