- 템플릿 조각(Fragment)이란?

템플릿 조각은 웹 애플리케이션의 HTML 템플릿에서 재사용 가능한 부분을 나타낸다. 이는 웹 페이지의 여러 부분에서 동일한 구성 요소를 사용하거나, 특정 부분을 여러 페이지에서 재사용하고자 할 때 유용하다.

템플릿 조각은 주로 웹 애플리케이션의 디자인이나 레이아웃의 일부를 나타낸다. 예를 들어, 웹 페이지의 헤더, 푸터, 사이드바 등은 템플릿 조각으로 분리하여 다른 페이지에서 재사용할 수 있다.

- 템플릿 조각 사용 방법

1) 템플릿 조각 정의하기

HTML 템플릿에서 템플릿 조각을 정의한다.
보통 <div>나 <section> 등의 HTML 요소로 표현되며, 해당 부분에 고유한 ID나 클래스를 부여하여 구분한다.
<!-- header.html -->
<header>
    <h1>웹 애플리케이션 헤더</h1>
    <nav>
        <ul>
            <li><a href="/">홈</a></li>
            <li><a href="/about">소개</a></li>
            <li><a href="/contact">연락</a></li>
        </ul>
    </nav>
</header>

2) 템플릿 조각 재사용하기

다른 HTML 템플릿에서 해당 템플릿 조각을 재사용한다.
th:replace, th:include, th:insert 등의 Thymeleaf 속성을 사용하여 구현된다.
<!-- index.html -->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>홈 페이지</title>
</head>
<body>
    <div th:replace="header :: header"></div>
    <h1>안녕하세요! 홈 페이지입니다.</h1>
    <!-- 나머지 내용 -->
</body>
</html>

 

위의 예제에서 th:replace="header :: header"는 header.html 파일에서 정의된 템플릿 조각인 header를 현재 페이지의 <div> 요소에 삽입한다. 이렇게 함으로써 모든 페이지에서 동일한 헤더를 사용할 수 있다.

앞쪽의 header는 템플릿 조각을 포함하는 파일의 이름이며, 뒤쪽의 header는 실제 템플릿 조각의 이름이나 프래그먼트의 이름이다. 이 구문은 템플릿 조각을 특정 파일에서 찾아 호출하는 방법을 지정한다.

티스토리툴바