티스토리 뷰

WEB/Template Engine

[Thymeleaf] Templates Fragments (템플릿 조각)

MAENCO 2021. 9. 2. 01:06
반응형

템플릿을 만들다 보면 빈번하게 같은 파트를 작성해야 하는 경우가 있다 (footers , header , menus..)

이 파트들을 만약 하나하나 작성하였다면 공통적인 부분임에도 불구하고 수정사항이 있을 때마다 전부 수정해야 할 것이다

이때 타임리프의 템플릿 레이아웃 기능을 사용하면 매우 효율적으로 처리할 수 있다

템플릿 레이아웃을 알아보기 전에 그 안에 더 작은 개념인 템플릿 조각을 먼저 살펴보겠다

 

Thymeleaf Template Fragments

우선 공통적으로 들어갈 footer가 있다고 가정하고 footer의 내용을 아래와 같이 작성하였다

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

본문이 될 main html에서 어떻게 사용하는지 살펴보자

(생략)
<body>

<!-- th:inser -->
<h1>부분 포함 insert</h2>
<div th:insert="~{template/fragment/footer :: copy}"></div>

<!-- th:replace -->
<h1>부분 포함 replace</h2>
<div th:replace="~{template/fragment/footer :: copy}"></div>

<!-- th:replace -->
<h1>부분 포함 단순 표현식</h2>
<div th:replace="template/fragment/footer :: copy"></div>

<!-- th:replace use paramter -->
<h1>파라미터 사용</h1>
<div th:replace="~{template/fragment/footer :: copyParam ('param1Value', 'param2Value')}"></div>

</body>

 

• th:insert : 해당 태그(예시에서는 div)내부에 추가(insert 된다)

<!-- th:insert -->
<h1>부분 포함 insert</h2>
<div th:insert="~{template/fragment/footer :: copy}"></div>


<!-- 출력 결과 -->
<div>
<footer>
footer 내용
</footer>
</div>

 

• th:replace : 해당 태그(예시에서는 div)를 대체(replace)한다


<!-- th:replace -->
<h1>부분 포함 replace</h2>
<div th:replace="~{template/fragment/footer :: copy}"></div>

<!-- 결과 -->
<footer>
footer 내용
</footer>

~{...}를 사용하는게 원칙이지만 사용하는 코드가 매우 단순하다면 이 부분을 아래와 같이 생략하고 작성할 수 있다

<!-- th:replace -->
<h1>부분 포함 단순 표현식</h2>
<div th:replace="template/fragment/footer :: copy"></div>

 

• th:replace 파라미터 사용 : 파라미터를 전달할 시에 동적으로 조각을 렌더링 할 수 있다

<!-- 조각 footer parameter 소스
<footer th:fragment="copyParam(param1, param2)">
    <p>parameter 내용</p>
    <p th:text="${param1}"></p>
    <p th:text="${param2}"></p>
</footer>
-->

<!-- th:replace use paramter -->
<h1>파라미터 사용</h1>
<div th:replace="~{template/fragment/footer :: copyParam ('param1Value', 'param2Value')}"></div>


<!-- 결과 -->
<footer>
<p>parameter 내용</p> 
<p>param1Value</p> 
<p>param2Value</p>
</footer>

 

더보기

개인 학습을 위해 작성되는 글입니다.

제가 잘못 알고 있는 점에 대한 지적 / 더 나은 방향에 대한 댓글을 환영합니다.

 

참조 링크:

https://www.inflearn.com/course/%EC%8A%A4%ED%94%84%EB%A7%81-mvc-2/dashboard

https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html

 

반응형
저작자표시

'WEB > Template Engine' 카테고리의 다른 글

[Thymeleaf with Spring] Creating a Form (Form 작성)  (0) 2021.09.03
[Thymeleaf] Template Layout (템플릿 레이아웃)  (0) 2021.09.02
[Thymeleaf] JavaScript Inlining (자바스크립트 인라인)  (1) 2021.09.02
[Thymeleaf] Block tag (블록 태그)  (0) 2021.09.02
[Thymeleaf] Comments (주석)  (0) 2021.09.02
댓글