Notice
Recent Posts
Recent Comments
Link
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

개발자되기 프로젝트

[Thymeleaf] 템플릿 조각 본문

인프런/[인프런] 스프링 MVC 2

[Thymeleaf] 템플릿 조각

Seung__ 2021. 9. 19. 14:55
  • 웹 페이지를 개발할 때는 공통 영역이 많음
  • 예를 들어서 상단 영역이나 하단 영역, 좌측 카테고리 등등
  • 여러 페이지에서 함께 사용하는 영역들이 있다. 
  • 이런 부분을 코드를 복사해서 사용한다면 변경시 여러 페이지를 다 수정해야 하므로 상당히 비효율 적이다. 
  • 타임리프는 이런 문제를 해결하기 위해 템플릿 조각과 레이아웃 기능을 지원한다.
  • 주의! 템플릿 조각과 레이아웃 부분은 직접 실행해보아야 이해된다.

 

 

1. footer.html

  • <footer th:fragment="name">
  • th:fragment="name"을통해 name 지정 가능.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>

<footer th:fragment="copy">
    푸터 자리 입니다.
</footer>

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

</body>
</html>

 

 

 

2. fragment.html

  • fragment insert  하는 방법(html 추가)
    • insert 지정한 <div></div>에 끼워넣기
    • th:insert="~{경로 :: 이름}"
    • th:insert="~{template/fragment/footer :: copy}"
    • <div th:insert="~{template/fragment/footer :: copy}"></div>
    • <div><footer>
    푸터 자리 입니다.
</footer></div>
  • fragment replace(html 추가)
    • replace 지정한 <div></div>를 fragment로 변경함.
    • th:replace = "~{경로 :: 이름}"
    • <div th:replace="~{template/fragment/footer :: copy}"></div>
    • <footer>
    푸터 자리 입니다.
</footer>
       
  • 부분 포함 단순 표현식
    • ~{...} 를 사용하는 것이 원칙이지만 템플릿 조각을 사용하는 코드가 단순하면 이 부분을 생략할 수 있다.
    • <div th:replace="template/fragment/footer :: copy"></div>
  • 파라미터 사용 가능
    • fragment에서 파라미터 사용 가능. 
    • th:fragment="name (param, param)" --> 띄어쓰기 주의
    • <footer th:fragment="copyParam (param1, param2)">
    <p>파라미터 자리 입니다.</p>
    <p th:text="${param1}"></p>
    <p th:text="${param2}"></p>
</footer>
    • fragmetn 사용처에서 fragment를 호출할 때 파라미터 넘겨서 사용 가능.
    • <div th:replace="~{template/fragment/footer :: copyParam ('데이터1', '데이터2')}"></div>
    • <footer>
    <p>파라미터 자리 입니다.</p>
    <p>데이터1</p>
    <p>데이터2</p>
</footer>
  • 전체
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>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>

 

 

  • 랜더링 후
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h1>부분 포함</h1>
<h2>부분 포함 insert</h2>
<div><footer>
    푸터 자리 입니다.
</footer></div>

<h2>부분 포함 replace</h2>
<footer>
    푸터 자리 입니다.
</footer>

<h2>부분 포함 단순 표현식</h2>
<footer>
    푸터 자리 입니다.
</footer>

<h1>파라미터 사용</h1>
<footer>
    <p>파라미터 자리 입니다.</p>
    <p>데이터1</p>
    <p>데이터2</p>
</footer>

</body>
</html>

 

 

3. GitHub : 210919 Fragment

 

GitHub - bsh6463/Thymeleaf

Contribute to bsh6463/Thymeleaf development by creating an account on GitHub.

github.com

 

'인프런 > [인프런] 스프링 MVC 2' 카테고리의 다른 글

[Thymeleaf] Template Layout 2  (0) 2021.09.19
[Thymeleaf] Template layout 1  (0) 2021.09.19
[Thymeleaf] JavaScript inline  (0) 2021.09.19
[Thymeleaf] block, <ht:block>  (0) 2021.09.19
[Thymeleaf] 주석  (0) 2021.09.19
'인프런/[인프런] 스프링 MVC 2' Related Articles more
Comments