템플릿 조각

• html 의 공통된 상단, 하단, 카테고리 로직이나 페이지마다 반복해서 사용해야되는 기능들을 method 를 호출하듯 파일을 나누어 참조시킬 수 있는 기능이다.

✏️ 템플릿 사용하기

• 템플릿을 사용하기 위해선 dependency 를 추가해야 한다.

implementation 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect' 

📍 기본 사용 방법

• fragment 생성
  • th:fragment="이름" 의 형태로 사용할 수 있다.
    • 태그 내의 로직이 호출될경우 랜더링된다.
  • 이름 은 fragment 의 호출이름이다.
    • method 의 이름과 같은 기능이다.
• fragment 사용
  • th:옵션="~{ 경로 :: 이름 }" 의 형태로 사용할 수 있다.
  • 옵션 은 어떤 형태로 불러올지 설정하는 자리이다.
  • 경로 는 파일의 경로를 입력하는 자리이다.
    • 파일의 확장자는 생략한다.
  • 이름 은 호출할 fragment 의 이름을 입력하는 자리이다.
    • java 의 method 호출과 같은 개념이다.

<!-- ***fragment 생성*** -->
<footer th:fragment="copy">
  푸터 자리 입니다.
</footer>

<!-- ***fragment 사용*** -->
<div th:insert="~{template/fragment/footer :: copy}"></div>

⚠️ 예제처럼 경로가 단순할경우 ~{ } 를 생략할 수 있다.

• 부분포함 단순 표현식

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

📍 insert VS. replace

• insert
  • 템플릿을 사용하고 있는 태그 내에 템플릿이 생성된다.

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

<!-- 결과물 -->
<div>
    <footer>
        푸터 자리 입니다.
    </footer>
</div>

• replace
  • 템플릿을 사용하고 있는 태그가 템플릿으로 교체된다.

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

<!-- 결과물 -->
<footer>
    푸터 자리 입니다.
</footer>

📍 fragment 파라미터 사용하기

• fragment 준비하기
  • java 의 method 처럼 괄호 ( ) 에 파라미터를 받을 수 있는 변수를 만든다.
  • 변수를 사용할 때는 ${ } 을 사용한다.

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

• fragment 템플릿 사용하기
  • tag 템플릿을 사용할 때 처럼 경로를 적고 fragment 이름 뒤에 fragment 에 전달할 변수를 넣어주면 된다.
  • 꼭 변수뿐만 아니라 단순 리터럴도 사용할 수 있다.
    • 예제에서는 문자 리터럴을 사용했다.

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

• 소스 확인
  • replace 를 사용했기 때문에 div 가 삭제됨

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