[java] Thymeleaf에서 타임리프 프레그먼트(fragment)를 어떻게 사용하나요?

29 Nov 2023

java

Thymeleaf는 서버 사이드 Java 템플릿 엔진으로 많이 사용되며, 프레그먼트를 사용하여 중복되는 코드를 재사용할 수 있습니다. 타임리프 프레그먼트를 사용하려면 다음 단계를 따르세요.

프레그먼트 생성하기
- 타임리프 템플릿 파일(.html)에서 중복되는 코드를 선택하고, <div th:fragment="fragmentName">...</div>와 같이 th:fragment 속성을 추가해 프레그먼트를 생성합니다. fragmentName은 프레그먼트의 이름입니다.
프레그먼트 재사용하기
- 다른 타임리프 템플릿 파일에서 프레그먼트를 사용하려면 <div th:insert="~{templateFileName :: fragmentName}">...</div>와 같이 th:insert 속성을 사용합니다. templateFileName은 프레그먼트를 포함한 템플릿 파일의 이름입니다.
프레그먼트의 변수 전달하기
- 프레그먼트에 변수를 전달하려면 <div th:fragment="fragmentName(variableName)">...</div>와 같이 variableName과 같은 변수를 프레그먼트에 추가하고, 사용하는 곳에서 th:insert 속성에서 변수를 전달합니다.

예시 코드:

프레그먼트 생성하기:

<!-- fragments.html -->
<div th:fragment="recentPosts">
    <h2>최근 게시물</h2>
    <!-- 최근 게시물 목록 출력 -->
</div>

프레그먼트 재사용하기:

<!-- home.html -->
<html>
<head>...</head>
<body>
    <div th:insert="~{fragments.html :: recentPosts}"></div>
    <!-- 최근 게시물 프레그먼트 삽입 -->
</body>
</html>

프레그먼트의 변수 전달하기:

<!-- fragments.html -->
<div th:fragment="postDetails(post)">
    <h2 th:text="${post.title}"></h2>
    <!-- 게시물 내용 출력 -->
</div>

<!-- home.html -->
<html>
<head>...</head>
<body>
    <div th:each="post : ${posts}">
        <div th:insert="~{fragments.html :: postDetails(post)}"></div>
        <!-- 게시물 상세 프레그먼트 재사용 -->
    </div>
</body>
</html>

위 예시에서는 recentPosts라는 이름의 프레그먼트와 postDetails라는 이름의 프레그먼트를 생성하고 재사용하는 방법을 보여주었습니다. 이러한 프레그먼트를 사용하면 중복되는 코드를 줄이고 유지보수성을 향상시킬 수 있습니다.

자세한 내용은 Thymeleaf 공식 문서를 참고하십시오. Thymeleaf 공식 문서