[Spring Boot] : 타임리프 템플릿 조각 사용

타임리프 - 템플릿 조각

---

웹 페이지 개발 시 여러 페이지에서 공통으로 겹치는 부분이 있다. 예를 들면 상단, 하단 등

이런 부분을 코드 복사로 사용하면 오류가 날 수도 있고 비효율적인데 이런 것을 해결하기 위해 타임리프에서 템플릿 조각과 레이아웃 기능을 지원한다.

 

그 중 템플릿 조각을 먼저 공부해 본다.

 

<footer th:fragment="copy">

먼저 footer.html에 위 코드를 작성해 주었다.

th:fragment 를 통해 사용할 수 있다. 이름을 먼저 copy로 정해주었다.

 

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

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

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

fragmentMain.html에는 위 코드를 작성해 주었다.

 

~{template/fragment/footer :: copy} 이 코드를 보면 template/fragment/footer.html 템플릿에 있는 copy 이름으로 된 부분 즉, 위 코드를 참고하자면 <footer th:fragment="copy"> 를 템플릿 조각으로 가져와서 사용한다는 의미이다.

이 중에서도 insert와 replace가 있는데 insert는 현재 태그(div) 내부에 추가를 해주는 것이고 replace를 사용하면 현재 태그를 대체하는 것이다.

 

그리고 ~{} 와 같은 템플릿 조각 문법을 사용하지 않고 단순 표현식처럼 나타낼 수 있는데 만약 복잡해 지면 템플릿 조각 문법을 사용해야 하니 간단한 부분만 사용하는 것이 좋다.

 

<footer th:fragment="copyParam (param1, param2)">
    <p>파라미터 자리 입니다.</p>
    <p th:text="${param1}"></p>
    <p th:text="${param2}"></p>
</footer>

파라미터 형식으로 th:fragment를 만들어주고

 

<div th:replace="~{template/fragment/footer :: copyParam ('데이터1', '데이터2')}"></div>

사용할 때도 역시 파라미터 형식으로 데이터를 전달해서 동적으로 조각을 렌더링 할 수 도 있다.

 

---

스프링 MVC 2편 - 백엔드 웹 개발 활용 기술을 참고하여 공부하였습니다.