인프런 김영한님의 Spring강의에서 공부한것을 올리며, Thymeleaf의 경우 unit 단위로 공부후 각각 정리하는 글을 작성하겠습니다.
템플릿 조각
웹페이지를 개발할때는 공통된 부분이 많다. 상단의 네비게이션 바, 하단의 저작권 표시 부분등 어느 페이지에 가던 공통적으로 처리되는 부분이 있다. 타임리프는 이런 문제를 해결하기 위해 템플릿 조각과 레이아웃 기능을 지원한다.
우선 이번 글을 결과물을 살펴봐야 이해가 가기 때문에 컨트롤러와 뷰 코드부터 먼저 살펴봅시다.
@Controller
@RequestMapping("/template")
public class TemplateController {
@GetMapping("/fragment")
public String template(){
return "template/fragment/fragmentMain";
}
}footer
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<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
<!DOCTYPE html>
<html lang="en">
<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>실행 결과는 다음과 같습니다.
가장 먼저 insert 부터 살펴봅시다.
● 부분 포함 insert
<div th:insert="~{template/fragment/footer :: copy}"></div>
우선 위 코드의 의미는 template/fragment/footer.html 템플릿에 있는 th:fragment="copy" 라는 부분을 템플릿 조각으로 가져와서 사용하겠다는 의미 입니다.
th:insert 를 사용했기 때문에 현재 태그인 <div></div> 태그 내부에 footer가 삽입됩니다.
● 부분 포함 replace
<div th:replace="~{template/fragment/footer :: copy}"></div>th:replace 를 사용하면 현재 태그인 <div></div> 를 대체해버립니다.
따라서 <div></div>는 사라지고 <footer>푸터 자리 입니다.</footer> 이 대체하게 됩니다.
● 부분 포함 단순 표현식
~{...} 를 사용하는 것이 원칙이지만 템플릿 조각을 사용하는 코드가 단순하면 이 부분을 생략할 수 있다.
● 파라미터 사용
<div th:replace="~{template/fragment/footer :: copyParam ('데이터1', '데이터2')}"></div>파라미터를 전달할수도 있다. 결과는 모두 위에서 확인해보시길!
'BackEnd > Thymeleaf' 카테고리의 다른 글
| [Thymeleaf] 입력 폼 처리 (0) | 2022.01.30 |
|---|---|
| [Thymeleaf] 레이아웃 (0) | 2022.01.30 |
| [Thymeleaf] 자바스크립트 인라인 (0) | 2022.01.28 |
| [Thymeleaf] 블록 (0) | 2022.01.28 |
| [Thymeleaf] 주석 (0) | 2022.01.28 |
댓글