템플릿 조각
fragment
명사조각, 파편
동사산산히 부수다[부서지다], 해체되다[하다]
웹 페이지를 만들 때, 페이지마다 중복되는 부분이 있다. 그런 부분을 조각별로 만들어두고, 타임리프를 통해 조각조각 불러서 사용할 수 있도록 타임리프는 템플릿 조각 기능을 지원한다.
예를 들면, 헤더, 푸터 등의 부분을 일일이 만들게 된다면 내용이 바뀔 때 모든 페이지에서 전부 수정해주어야 한다. 하지만 템플릿 조각을 이용하면, 한 번의 수정으로 쉽게 처리할 수 있다.
템플릿 조각은 th:fragment 를 이용해 활용할 수 있다.
1. 템플릿 조각 만들기
홈페이지 하단에 들어갈 푸터 부분을 만들어두고, 이를 불러다가 쓸 수 있도록 템플릿 조각을 만들어보자.
아래와 같이 html 파일을 만들어두고 필요한 태그에 th:frament='이름' 형식으로 조각에 이름을 붙인다.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<footer th:fragment="copy">
템플릿 조각 : 푸터
</footer>
<footer th:fragment="copyParam (param1, param2)">
<p>템플릿 조각 & 파라미터 : 푸터</p>
<p th:text="${param1}"></p>
<p th:text="${param2}"></p>
</footer>
</html>2. 템플릿 조각 사용하기
메인 페이지에서 푸터를 하단에 추가한다고 가정하고, 아래와 같이 활용할 수 있다. 템플릿 조각을 사용할 때는 두 가지 방식이 있다. 영어 단어에 직관적으로 대응하기 때문에 어렵지 않다.
th:insert: 해당 태그 안에 템플릿 조각 코드를 넣는다(insert).th:replace: 해당 태그를 템플릿 조각 코드로 대체(replace)한다.
뒤에 템플릿 조각 코드가 있는 html 파일의 경로를 넣어주어 사용하면 된다. 아래 예제 코드와 같이 "~{경로:: 조각이름}" 또는 "경로 :: 조각이름" 의 방식으로 경로를 넣고 :: 뒤에 템플릿 코드 조각에 붙인 이름을 써주면 해당 템플릿 조각이 삽입되는 방식이다.
th:insert="경로 :: 조각이름"
th:replace="~{경로 :: 조각이름}"
예제
아래 예제코드를 보면 th:insert, th:replace 두 가지를 활용하고 있는데, 결과를 통해 어떻게 보여지는지 보면 바로 이해가 될 것이다.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>메인 페이지</title>
</head>
<body>
<h1>부분 포함</h1>
<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>
<h1>파라미터 사용 </h1>
<div th:replace="~{template/fragment/footer :: copyParam (`파라미터1`, '파라미터2')}"></div>
</body>
</html>결과
일단 렌더링된 페이지를 보면, 이와 같이 메인 페이지에 아까 우리가 푸터에 활용할 템플릿 코드조각이 잘 들어간 것을 볼 수 있다.
하지만 위에서 사용한 th:insert, th:replace 의 차이를 보기 위해선 페이지 소스 보기 또는 개발자 도구 를 통해서 html 코드를 보아야 알 수 있다.
- insert 부분을 보면 <div> 태그 내에 <footer>가 삽입된 것을 볼 수 있다.
- replace 를 활용한 부분에는 <div>가 사라지고 <footer>로 대체된 것을 확인할 수가 있다.
파라미터를 Model로 넘겨주려면?
위의 예제에는 파라미터에 직접 문자열을 대입하는 방식으로 처리되어 있는데 만약, Model로 넘어온 값을 넣어주고 싶다면 어떻게 할까? 이것도 타임리프를 활용하면 쉽게 구현할 수 있다.
Model에 사진과 같이 두 개의 값을 넘겨주도록 처리한다. 메인페이지(html)에서 타임리프를 표현식을 넣어준다.
<h1>파라미터 사용</h1>
<div th:replace="~{template/fragment/footer :: copyParam (${footerName1}, ${footerName2})}"></div>그러면 아래와 같이 Model에서 넘겨준 값을 푸터에 출력할 수 있게 된다.
