타임리프 시작(5)

JIWOO YUN·2024년 1월 22일

SpringMVC2

목록 보기

5/26

템플릿 조각

웹페이지 개발시 공톡영역으로 자주 사용하는 상단 ,하단 ,좌측 카테고리 등등 여러 페이지에서 함꼐 사용하는 영역들을 코드로 복사해서 사용할 경우 변경시 여러페이지를 다 수정하는 비효율적인 작업을 해야하는 것을 해결하기 위한 템플릿 조각

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

fragment 가 있는 태그는 다른 곳에 포함되는 코드 조각

메인 fragment html 부분

<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:replace

부분 포함 insert

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

-> 현재 태그 (div) 내부에 template/fragment/footer.html 템플릿에 있는 th:fragment="copy" 라는 부분을 내부에 추가함.

부분 포함 replace

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

-> replace의 경우는 현재 태그를 대체

div가 사라지고 template/fragment/footer.html 템플릿에 있는 th:fragment="copy" 라는 부분으로 대체된다.

파라미터 사용

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

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

template/fragment/footer.html 템플릿에 있는 th:fragment="copyParam('파라미터1','파라미터2')" 부분으로 대체된다.

파라미터 1부분에는 데이터1이 들어감.
파라미터 2 부분에는 데이터 2가 들어감.

템플릿 레이아웃

코드 조각을 레이아웃에 넘겨서 사용하는 방법
공통으로 사용되는 css,javascript 정보들이 있는 경우, 이러한 공통 정보를 한곳에 모아두고 공통으로 사용하지만, 거기에 추가로 각 페이지마다 필요한 정보를 더 추가하고 싶을 경우 사용된다.

공통 레이아웃

<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="common_header(title,links)">
    <title th:replace="${title}">레이아웃 타이틀</title>
    <!-- 공통 -->
    <link rel="stylesheet" type="text/css" media="all" th:href="@{/css/awesomeapp.css}">
    <link rel="shortcut icon" th:href="@{/images/favicon.ico}">
    <script type="text/javascript" th:src="@{/sh/scripts/codebase.js}"></script>
    <!-- 추가 -->
    <th:block th:replace="${links}" />
</head>

메인 레이아웃

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="template/layout/base :: common_header(~{::title},~{::link})">
    <title>메인 타이틀</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/themes/smoothness/jquery-ui.css}">
</head>
<body>
메인 컨텐츠
</body>
</html>

common_header(~{::title},~{::link})

현재 페이지의 title 태그를 전달
현재 페이지의 link 페이지를 전달

공통 레이아웃에 전달 받은 title과 link를 통해서 공통 레이아웃에 replace로 전달받은 태그로 변경되어서 출력된다.

레이아웃에 필요한 코드 조각을 전달해서 완성하는 수순.

템플릿 레이아웃 2

head 부분에서만 사용하는게 아닌 html 전체에 적용이 가능하다.

공용 레이아웃 파일

<!DOCTYPE html>
<html th:fragment="layout (title, content)" xmlns:th="http://www.thymeleaf.org">
<head>
    <title th:replace="${title}">레이아웃 타이틀</title>
</head>
<body>
<h1>레이아웃 H1</h1>
<div th:replace="${content}">
    <p>레이아웃 컨텐츠</p>
</div>
<footer>
    레이아웃 푸터
</footer>
</body>
</html>

메인 레이아웃

<!DOCTYPE html>
<html th:replace="~{template/layoutExtend/layoutFile :: layout(~{::title},~{::section})}"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <title>메인 페이지 타이틀</title>
</head>
<body>
<section>
    <p>메인 페이지 컨텐츠</p>
    <div>메인 페이지 포함 내용</div>
</section>
</body>
</html>