상단 영역이나 하단 영역, 좌측 카테고리 등등 여러 페이지에서 함께 사용하는 공통 영역을 관리 용이하게 처리 지원
package hello.thymeleaf.basic;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
@RequestMapping("/template")
public class TemplateController {
@GetMapping("/fragment")
public String template() {
return "template/fragment/fragmentMain";
}
}
/resources/templates/template/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>
th:fragment 가 있는 태그는 다른곳에 포함되는 코드 조각으로 이해 하면 됨.
/resources/templates/template/fragment/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:replace="~{template/fragment/footer :: copyParam ('데이터1', '데이터2')}"></div>
</body>
</html>
template/fragment/footer :: copy
template/fragment/footer.html 템플릿에 있는 th:fragment="copy" 부분을 템플릿 조각으로 가져와서 사용한다는 의미
footer.html 의 copy 부분
<footer th:fragment="copy">
푸터 자리 입니다.
</footer>
부분 포함 insert
<div th:insert="~{template/fragment/footer :: copy}"></div><h2>부분 포함 insert</h2>
<div>
<footer>
푸터 자리 입니다.
</footer>
</div>th:insert 를 사용하면 현재 태그( div ) 내부에 추가한다.
부분 포함 replace
<div th:replace="~{template/fragment/footer :: copy}"></div><h2>부분 포함 replace</h2>
<footer>
푸터 자리 입니다.
</footer>th:replace 를 사용하면 현재 태그( div )를 대체한다.
부분 포함 단순 표현식
<div th:replace="template/fragment/footer :: copy"></div><h2>부분 포함 단순 표현식</h2>
<footer>
푸터 자리 입니다.
</footer>~{...} 를 사용하는 것이 원칙이지만 템플릿 조각을 사용하는 코드가 단순하면 이 부분을 생략 가능
파라미터 사용
파라미터를 전달해서 동적으로 조각을 렌더링 할 수도 있다
<div th:replace="~{template/fragment/footer :: copyParam ('데이터1', '데이터2')}"></div>
<h1>파라미터 사용</h1>
<footer>
<p>파라미터 자리 입니다.</p>
<p>데이터1</p>
<p>데이터2</p>
</footer>footer.html 의 copyParam 부분
<footer th:fragment="copyParam (param1, param2)">
<p>파라미터 자리 입니다.</p>
<p th:text="${param1}"></p>
<p th:text="${param2}"></p>
</footer>
수강 강의
https://www.inflearn.com/course/%EC%8A%A4%ED%94%84%EB%A7%81-mvc-2/dashboard
스프링 MVC 2편 - 백엔드 웹 개발 활용 기술 - 인프런 | 강의
웹 애플리케이션 개발에 필요한 모든 웹 기술을 기초부터 이해하고, 완성할 수 있습니다. MVC 2편에서는 MVC 1편의 핵심 원리와 구조 위에 실무 웹 개발에 필요한 모든 활용 기술들을 학습할 수 있
www.inflearn.com
'Java > Thymeleaf' 카테고리의 다른 글
| 템플릿 레이아웃[2] (0) | 2021.12.10 |
|---|---|
| 템플릿 레이아웃[1] (0) | 2021.12.10 |
| 자바스크립트 인라인 (0) | 2021.12.10 |
| 블록 (0) | 2021.12.10 |
| 주석 (0) | 2021.12.03 |