김동형수 개발기

Spring MVC + Thymeleaf에 매개변수 전달이 가능한 fragment 작성하기 본문

Spring

Spring MVC + Thymeleaf에 매개변수 전달이 가능한 fragment 작성하기

김동형수 2020. 1. 8. 16:54

오늘은 thymeleaf의 th:include를 이용해서 반복 사용되는 코드 블럭을 fragment화 하고 파라메터 전달을 통해서 코드의 재사용성을 조금 더 높혀보려 합니다.

 

Spring MVC4에 Thymeleaf3를 구성하려면 2019/12/26 - [Spring] - Spring MVC 4에 Thymeleaf 3 적용하기을 먼저 보시고 오시길 바랍니다.

지난번에 layout 구성을 했고 컨텐츠는 home.html에 작성해줬습니다.

 

그러면 frament 부터 작성해보겠습니다.

 

"fragment 화 된 코드 블럭"은 너무 길기 때문에 은 이하 컴포넌트(component)라고 하겠습니다.

 

따라서 servlet-context.xml에서 설정한 template resolver의 prefix인 /WEB-INF/views의 하단에 components 폴더를 생성하고 해당 폴더 하위에 컴포넌트로 사용할 type1.html과 type2.html을 생성해줍니다.

type1.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<div th:fragment="type1(param1, param2, param3)">
    <th:block th:text="${param1}"/><br/>
    <th:block th:text="${param2}"/><br/>
    <th:block th:text="${param3}"/><br/>
</div>
</html>

type2.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<div th:fragment="type2(param1, param2, param3)">
    <span style="color: rgb(255,0,0);"><th:block th:text="${param1}"/></span><br/>
    <span style="color: rgb(0,255,0);"><th:block th:text="${param2}"/></span><br/>
    <span style="color: rgb(0,0,255);"><th:block th:text="${param3}"/></span><br/>
</div>
</html>

type1 컴포넌트와 type2 컴포넌트를 구분하기 위해서 font-color를 다르게 적용해봤습니다.

 

역시 컬러는 심플하게 rgb지

th:fragment="컴포넌트명(인자1, 인자2, ...)"과 같은 방식으로 사용하게 되면 include할 때 매개변수가 전달 가능한 컴포넌트 형식으로 구성할 수 있습니다.

 

이제 템플릿에서 content 부분에 채워질 home.html 에 type1, type2 컴포넌트를 삽입해보겠습니다. 코드는 아래와 같습니다.

home.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
    xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
    data-layout-decorate="~{structures/layout/type1}"
    >

<div layout:fragment="content">

    "컨텐츠"
    <div th:include="components/type1 :: type1('스프링 MVC','타임리프', '프레그먼트')"></div>
    <br/><br/> <!-- 구분을 위한 개행 -->
    <div th:include="components/type2 :: type2('스프링 MVC','타임리프', '프레그먼트')"></div>
    <br/><br/> <!-- 구분을 위한 개행 -->
    <div th:include="components/type2 :: type2('김동형수','개발기', '입니다')"></div>
</div>

</html>

 

th:include="상대경로 :: 프레그먼트 명(매개변수1, 매개변수2, ...)"와 같은 방법으로 코드를 입력하게 되면 기존에 작성했던 컴포넌트가 매개변수를 이용해서 include가 됩니다.

 

상대경로는 servlet-context.xml에서 설정한 template resolver의 prefix인 /WEB-INF/views를 기준이며, 프레그먼트 명은 해당 컴포넌트를 작성할 때 사용한 th:fragment="프레그먼트 명"을 사용하시면 됩니다.

 

Finish

 

component include result

type1 1번, type2 두 번 내용다르게 삽입한 결과입니다.

(짜잔. 알록달록하니 이쁘게)잘 나온 것을 확인할 수 있습니다. 

 

SI프로젝트를 하다보면 뷰 코드중복이 여러 번 발생하게 되는데 thymeleaf의 fragment를 잘 사용한다면 코드라인 수를 상당히 절약할 수 있을 것 같습니다.

Sample Code

https://github.com/kim-ddongs/spring4-thymeleaf3-layout2

'Spring' 카테고리의 다른 글

Spring MVC 4에 Thymeleaf 3 적용하기  (0) 2019.12.26
'Spring' Related Articles more
Comments