728x90
페이지를 구성하다보면 공통적으로 들어가는 부분이 존재한다.
이러한 공통적인 부분들을 따로 만들어서 각각의 페이지에 끼워넣기만 하면 편리할 것이다.
이를 도와주는 것이 Thymeleaf Layout Dialect이다.
build.gradle의 dependencies에 다음 코드를 추가한다.
dependencies{
.
.
.
implementation 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect'
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
}타임리프가 이미 추가되어있다면 dialect만 추가하면 된다.
이제 공통 레이아웃을 만들 차례이다.
나는 commons.html 안에 다음과 같이 공통 영역들을 만들었다.
<commons.html>
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<div th:fragment="common1">
<h1>공통 영역 1</h1>
</div>
<div th:fragment="common2">
<h1>공통 영역 2</h1>
</div>
<div th:fragment="common3">
<h1>공통 영역 3</h1>
</div>
</html>th:fragment를 사용하여 외부에서 이 공통 영역에 접근하기 위해 필요한 이름을 정한다.
외부에서 공통 영역 1을 사용하려면 common1이라는 이름을 사용해야한다.
그리고 이를 page.html에 적용해보려 한다.
<page.html>
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div th:replace="./commons::common1"></div>
<div th:replace="./commons::common2"></div>
<div th:replace="./commons::common3"></div>
</body>
</html>
사용할 때는 다음과 같이 사용한다.
th:replace=" [ 공통 레이아웃 파일 위치 ] :: [ 공통 영역 이름 ] "
<controller>
@Controller
public class ViewController {
@GetMapping("/views/page")
public String pageController() {
return "page";
}
}
웹 사이트를 구성할 때 footer나 navbar의 경우 어느 페이지를 들어가나 항상 같은 형태를 유지해야하는 경우가 많기 때문에 이럴 경우 Thymeleaf layout dialect를 적극적으로 활용하면 좋을 듯 하다.
728x90
'공부 > Spring' 카테고리의 다른 글
| [Spring][인프런 스프링 MVC] MVC 구를 직접 개선해가며 스프링 MVC 구조를 이해하기 (controller v1~v4) (0) | 2023.03.01 |
|---|---|
| [Spring] 스프링 mysql 데이터베이스와 jpa 연동 (2) | 2023.02.17 |
| [Spring][Thymeleaf] 타임리프 기초 문법 (2) | 2023.02.12 |
| [Spring][JPA] H2 데이터베이스를 사용한 JPA 기초 사용법 (0) | 2023.02.10 |
| [Spring][스프링 MVC 1편] 서블릿 기초 사용법 (0) | 2023.02.08 |