🌿 Thymeleaf - Fragment (공통영역처리)

Kim Dae Hyun·2021년 7월 21일

Spring Template-Engine Thymeleaf spring mvc

Thymeleaf

목록 보기

1/3

🚀
간단한 Admin 페이지 정도는 스스로 만들 수 있도록 템플릿 엔진을 공부합니다 !

🔎 공통 영역 처리를 하는 이유

웹 페이지의 경우 공통으로 반복되는 영역이 많이 있습니다.
페이지의 정보를 나타내는 헤더부분, 메뉴 탭을 나타내는 네비게이션 바, 저작권 정보 등을 표시하는 푸터 등 여러 페이지에 거쳐 반복되는 영역이 존재합니다.

이런 공통의 영역들을 매 페이지의 HTML파일에 반복한다면 각 파일이 지저분해지는 것은 물론이고 변경의 지점 또한 분산되게 됩니다.

공통의 영역을 분리함으로써 변경지점을 최소화할 수 있어서 변경에 참 용이합니다.

🔎 th:fagment 문법

Thymeleaf가 제공하는 fragment 문법에 대해 간단하게 알아볼께요.

먼저 공통 영역을 정의합니다.
<footer>를 th:fragment를 이용해 조각화하였고 이름은 footerFragment로 설정하였습니다.

[ footer.html ]

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>

<footer th:fragment="footerFragment">
  <p> COPYRIGHT@ dhk22</p>
</footer>

</body>
</html>

fragment는 대표적으로 두 가지 방법으로 이용할 수 있습니다.

🔎 th:insert

insert는 태그 내로 조각을 삽입하는 방법입니다.
여기서 태그 내란 <div> 안쪽에 <footer>가 위치하는 것 입니다.
랜더링한 결과를 소스보기로 확인해보면 조각화한 footer가 div 내로 삽입된 것을 확인할 수 있습니다.

🔎 th:replace

replace는 해당 태그를 완전히 대체하는 방법입니다.
랜더링한 결과를 소스보기로 확인해보면 조각화한 footer가 div를 대체한 것을 확인할 수 있습니다.

조각을 사용할 때는 Thymeleaf가 제공하는 조각 문법인 ~{...} 를 사용합니다.
::를 기준으로 앞에는 조각이 있는 경로를 뒤에는 조각의 이름을 설정해줍니다.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h2>Main Page</h2>
<div th:insert="~{/test/footer :: footerFragment}"></div>

<div th:replace="~{/test/footer :: footerFragment}"></div>
</body>
</html>

랜더링 한 결과입니다.

🔎 Fragment에서 파라미터 사용

fragment측 HTML 코드입니다.

파라미터를 받는 형식이 굉장히 직관적이여서 사용하기에는 좋은 것 같습니다. 단순히 조각 이름 옆에 파라미터를 순서대로 적어주시면 됩니다.
표현식으로는 Thymeleaf의 상수 표현식인 |..|와 변수 표현식인 ${...}를 사용하였습니다.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>

<footer th:fragment="footerFragmentParam (param1, param2)">
  <p> COPYRIGHT@ dhk22</p><br/>
  <p th:text="|Hi, ${param1}|"></p>
  <p th:text="|Im ${param2}|"></p>
</footer>

</body>
</html>

fragment를 사용하는 HTML 코드입니다.

기존의 방식과 동일하게 조각 표현식인 ~{..}와 :: 키워드를 사용였고 파라미터로 'everyone' , 'kim'을 넘겨주었습니다.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h2>Main Page</h2>

<div th:replace="~{/test/footer :: footerFragmentParam ('everyone', 'kim')}"></div>

</body>
</html>

랜더링 결과입니다.

🔎 파라미터에 값이 아닌 태그 자체를 전달

Fragment의 파라미터에는 값 뿐만 아니라 태그 자체를 전달할 수 있습니다.

Fragment 측 HTML 코드입니다.
여기서 파라미터로 전달되는 title과 contents는 태그입니다.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body th:fragment="common_body(title, contents)">
    <h1 th:replace="${title}">Title</h1>
    <section th:replace="${contents}">contents</section>
</body>
</html>

Fragment를 사용하는 쪽의 HTML 코드입니다.
h1 태그와 section 태그 자체를 common_body fragment에 전달해주었습니다.

태그 전달시 문법이 좀 생소한데 ~{::태그명} 입니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body th:replace="~{test/testFragment :: common_body(~{::h1}, ~{::section})}">
  <h1>Main Page title</h1>
  <section>
    <h2>Main Page contents</h2>
  </section>

</body>
</html>

랜더링 결과입니다.

태그를 직접 전달함으로 좀 더 범용적인 조각화가 가능해졌습니다.

Kim Dae Hyun

다음 포스트