FireDrago

[Thymeleaf] 기능 - 템플릿 사용 본문

프로그래밍/템플릿 엔진(thymeleaf, jsp)

[Thymeleaf] 기능 - 템플릿 사용

화이용 2024. 2. 5. 14:39

이전 포스팅에서 타임리프의 기본기능을 살펴봤다.

이번에는 웹페이지를 개발할때 공통영역 부분을 한 곳에서 처리할 수 있는 템플릿 조각과 레이아웃 기능을 알아보자

 

<템플릿 조각>

먼저 공통적으로 사용되는 코드 조각을 모아두는 html 을 하나 생성한다.

태그안에 th:fragment = "호출명" 을 설정해준다. 

파라미터가 필요한 경우에는 th:fragment = "호출명 (파라미터)" 형식으로 설정 해줄 수 도 있다. 

이제 해당태그를 다른 타임리프 파일에서 불러오는 코드를 살펴보자

 

1. th:insert

    - th:insert 를 사용하면 현재 태그 내부에 호출 태그를 삽입한다. ~{경로 :: 호출명}  으로 호출한다.

      경로가 단순한 경우 ~{} 를 생략하여 표현 할 수도 있다. (div 태그 안에 footer 생성)

2. th:replaece

    - th:replace를 사용하면 현재 태그 대신 호출 태그를 삽입한다. (div 대신 footer로 변경)

3. 파라미터 사용

    - 파라미터를 사용하는 호출태그의 경우 :: 호출명 (파라미터) 형식으로 호출한다.

 

<레이아웃>

템플릿 조각기능은 일부 태그를 가져와서 사용할 수 있는 기능이었다.

이번에는 레이아웃에 코드조각을 넘겨서 형식에 맞게 사용할 수 있는 기능을 알아보자

먼저 공통으로 사용하는 부분과 파일마다 추가해야할 부분을 정의한 타임리프를 만든다.

 

다음으로 레이아웃을 호출하는 타임리프를 만든다.

호출방식은 템플릿 조각에서 이미 살펴봤다. 그런데 파라미터에 ~{::title} , ~{::link} 이 있다. 

~{::} 는 특수태그로 동적으로 변수를 할당할때 사용한다. 위 코드에서는 title 태그와 link 태그들이 파라미터로 전달된다

실행결과 <title> 로 전달된 "메인타이틀" 이 레이아웃에 표시되었고,

<link> 태그들 역시 추가된 것을 확인 할 수 있다.

 

<레이아웃 확장>

레이아웃의 개념은 <html> 전체에 적용 할 수 도 있다.

html 태그에 th:fragment 태그를 사용하여 레이아웃을 생성했다.

<html> 에 th:fragment 속성이 정의되어 있다. 이 레이아웃 파일을 기본으로 하고 

여기에 필요한 내용을 전달해서 부분부분 변경한다.

파라미터를 통해 title 태그와 section 태그를 파라미터로 전달하고 있다.

<html> 자체를 th:replace 를 사용해서 변경하는 것을 확인할 수 있다. 

결국 레이아웃에 필요한 내용을 전달하면서 <html> 자체를 레이아웃 파일로 변경한다.