오봉이와 함께하는 개발 블로그

스프링 MVC 2 - 타임리프 템플릿 조각 본문

BE/Thymeleaf

스프링 MVC 2 - 타임리프 템플릿 조각

오봉봉이 2022. 8. 17. 01:48
728x90

템플릿 조각

웹 페이지를 개발할 때는 상단, 하단, 좌측 카테고리 등 여러 페이지에서 함께 사용하는 공통 영역이 많이 있다.
공토 영역 코드를 복사해서 모든 페이지에 사용하면 변경시 여러 페이지를 다 수정해야 하는 불상사가 생긴다.
타임리프는 이런 문제를 해결하기 위해 템플릿 조각과 레이아웃 기능을 지원한다.

코드

@Controller
@RequestMapping("/template")
public class TemplateController {

    @GetMapping("/fregment")
    public String template() {
        return "template/fragment/fragmentMain";
    }
}

/resources/templates/template/fragment/footer.html

<!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>

th:fragment가 있는 태그는 다른곳에 포함되는 코드 조각으로 이해하면 된다.

/resources/templates/template/fragment/fragmentMain.html

<!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>

template/fragment/footer :: copy는 template/fragment/footer.html에 있는
th:fragment="copy"라는 부분을 템플릿 조각으로 가져와 사용한다는 의미.

부분 포함 insert

<div th:insert="~{template/fragment/footer :: copy}"></div>

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

th:insert를 사용하면 현재 태그 내부에 추가한다.

부분 포함 replace

<div th:replace="~{template/fragment/footer :: copy}"></div>

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

th:replace를 사용하면 현재 태그를 대체한다.

부분 포함 단순 표현식

<div th:replace="template/fragment/footer :: copy"></div>

~{...}를 사용하는 것이 원칙이지만 템플릿 조각을 사용하는 코드가 단순하면 이 부분 생략 가능.

파라미터 사용

파라미터를 전달해서 동적으로 조각을 렌더링 할 수도 있다.

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

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

메소드 작동하듯 사용한다고 이해하면 편할듯 하다.

출처 : 인프런 김영한 지식공유자님 강의 스프링 MVC 2편 - 백엔드 웹 개발 활용 기술
728x90
저작자표시

'BE > Thymeleaf' 카테고리의 다른 글

스프링 MVC 2 - 타임리프 스프링 통합  (0) 2022.08.17
스프링 MVC 2 - 템플릿 레이아웃  (0) 2022.08.17
스프링 MVC 2 - 타임리프 자바스크립트 인라인  (0) 2022.08.17
스프링 MVC 2 - 타임리프 블록  (0) 2022.08.17
스프링 MVC 2 - 타임리프 주석  (0) 2022.08.17
'BE/Thymeleaf' Related Articles more
Comments