참고
Spring Boot & Thymeleaf 시리즈는 김영한 님의 "스프링 MVC 2편 - 백엔드 웹 개발 활용 기술" 강의를 정리한 글입니다. 글에 첨부된 사진은 해당 강의의 강의 자료에서 캡쳐한 것입니다. 제 Github에만 올려뒀다가, 정보 공유와 강의 홍보(?)를 위해 블로그에도 업로드합니다.
스프링 MVC 2편 - 백엔드 웹 개발 활용 기술 - 인프런 | 강의
웹 애플리케이션 개발에 필요한 모든 웹 기술을 기초부터 이해하고, 완성할 수 있습니다. MVC 2편에서는 MVC 1편의 핵심 원리와 구조 위에 실무 웹 개발에 필요한 모든 활용 기술들을 학습할 수 있
www.inflearn.com
마크다운 형식으로 작성한 글을 블로그에 다시 올리는 거라 가독성이 많이 떨어집니다. 조금더 편하게 보시려면 아래의 Github repository에서 보시면 됩니다.
GitHub - Kloong1/TIL: Today I Learned.
Today I Learned. Contribute to Kloong1/TIL development by creating an account on GitHub.
github.com
타임리프 - 템플릿 조각
웹 페이지를 개발할 때는 공통 영역이 많이 있다. 예를 들어서 상단 영역이나 하단 영역, 좌측 카테고리 등등 여러 페이지에서 함께 사용하는 영역들이 있다.
이런 영역들을 사용할 때 코드를 복사해서 여러 파일로 만들어서 사용한다면, 변경시 모든 파일을 수정해야 하므로 상당히 비효율 적이다.
타임리프는 이런 문제를 해결하기 위해 템플릿 조각과 레이아웃 기능을 지원한다.
TemplateController.java
package kloong.thymeleaf.basic;
import ... //생략
@Controller
@RequestMapping("/template")
public class TemplateController {
@GetMapping("/fragment")
public String fragment() {
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>실행 결과
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<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>
</html>~{template/fragment/footer :: copy}~{파일경로 :: th:fragment의 값}template/fragment/footer.html템플릿에 있는th:fragment="copy"에 해당하는 태그를 불러와서 사용한다는 의미이다.th:fragment속성을 없애고 불러온다.
th:insert
<div th:insert="~{template/fragment/footer :: copy}"></div>th:insert가 존재하는 태그 내부에 템플릿 조각을 추가한다.
th:replace
<div th:replace="~{template/fragment/footer :: copy}"></div>th:replace가 존재하는 태그를 템플릿 조각으로 대체한다.
단순 표현식
<div th:replace="template/fragment/footer :: copy"></div>~{...}를 사용하는 것이 원칙이지만, 코드가 단순하면 이 부분을 생략할 수 있다.
파라미터 사용
<div th:replace="~{template/fragment/footer :: copyParam ('데이터1', '데이터2')}"></div>- 파라미터를 전달해서 동적으로 템플릿 조각을 렌더링 할 수 있다.
'Spring > Spring Boot & Thymeleaf' 카테고리의 다른 글
| [Spring Boot & Thymeleaf] 17. 스프링 통합과 HTML Form (0) | 2022.10.24 |
|---|---|
| [Spring Boot & Thymeleaf] 16. 템플릿 레이아웃 (0) | 2022.10.24 |
| [Spring Boot & Thymeleaf] 14. 자바스크립트 인라인(Javascript Inline) (0) | 2022.10.24 |
| [Spring Boot & Thymeleaf] 13. Block 태그 (0) | 2022.10.24 |
| [Spring Boot & Thymeleaf] 12. 주석 (0) | 2022.10.24 |
댓글