728x90
view 화면을 구성하다보면 반복되는 html부분이 있습니다. 예를 들면 header나 footer 같은 부분입니다.
이러한 부분을 모든 html문서에 동일하게 작성하게 되면 코드가 길어지고 반복해야하는 개발자의 피로도도 높아집니다.
이러한 반복을 방지하기 위해 타임리프에서는 코드의 일부를 재사용하는 기능이 있습니다.
1. th:fragment
이 기능은 재사용할 html을 지정하는 기능입니다. 따라서 일반적으로 header나 footer에 사용합니다.
예를 들어 살펴보겠습니다.
include/header.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="html_header">
<meta charset="UTF-8">
<title>헤더입니다.</title>
</head>
<body>
<div th:fragment="header_div">
header html에 있는 body안의 div입니다.
</div>
</body>
</html>
위 코드에서 head는 html_header라는 이름으로 재사용할 수 있습니다.
그리고 body안의 div태그도 header_div라는 이름으로 재사용할 수 있습니다.
index.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="ko">
<head th:replace="~{/include/header :: html_header}"></head>
<body>
<div th:replace="~{/include/header :: header_div}"></div>
<div> 이 부분은 index 부분입니다.</div>
</body>
</html>
위 코드는 재사용하는 부분입니다.
/include/header는 템플릿 폴더안에서 include 폴더안의 header.html을 의미합니다.
결과를 살펴보겠습니다.
경로를 보면 index이지만 header의 title과 body안의 div가 적용된 것을 확인할 수 있습니다.
또한 개발자모드를 열어서 코드를 확인해보면 재사용된 코드가 적용되어있는것을 볼 수 있습니다.
'JAVA Programming > Thymeleaf' 카테고리의 다른 글
| [Thymeleaf] View 환경설정 (0) | 2024.12.12 |
|---|