[Thymeleaf] template 기능 - replace
- Web/Thymeleaf
- 2022. 3. 23.
Thymeleaf, template 기능 사용하기
template 사용하기
HTML에서 흔히 사용하는 이 방식은 header, section, nav, footer, main 등 다양하게 나뉜다.
이는 각 part마다의 기능을 나누는 것을 목적으로 두지만 각 기능이 나뉜 만큼 각 사이트마다 중복되는 영역이 존재하여 template, layout 등 다양한 용어로 페이지를 쪼개어서 유지보수를 쉽게 하기 위함이 가장 뚜렷하다.
th:fragment - 영역 저장하기
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<th:block th:fragment="topFrag">
<h6>============== Top ==========</h6>
</th:block>
</html>
쉽게 설명하기 위해서 해당 페이지를 불러온다면, 정상적인 html을 볼 수가 있다.
그러나 th:fragment는 html 중에서, 가져가고 싶은 영역만 따로 지정할 수가 있다.
th:replace - 영역 불러오기
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<th:block th:replace="~{layout/re_top::topFrag}">top 영역</th:block>
<th:block>test</th:block>
</html>
위에하고 반대로 th:replace는 html을 불러오는 기능을 담고 있다.
보통 fragment만 적어도 되지만, 정확한 위치를 알리기 위해서는 해당 fragment의 html이 어디 경로에 있는지 알려주면 더 좋다.
해당 code는 test만 작성하였지만, fragment로부터 가져오는 ===top=== 또한 불러오는 것을 확인할 수가 있다.
해당 방법에 대해서는 Thymeleaf의 기본 기능으로 들어있다.
반응형
'Web > Thymeleaf' 카테고리의 다른 글
| [Thymeleaf] NULL 구분하기 (0) | 2022.04.07 |
|---|---|
| [Thymeleaf] template 기능, layout (0) | 2022.03.23 |
| [Thymeleaf] for 사용하기 (1) | 2022.03.08 |
| [Thymeleaf] if - else 사용하기 (0) | 2022.03.08 |
| [Thymeleaf] with 사용하기 (0) | 2022.03.07 |