웹 화면을 개발하다 보면 여러 페이지에서 반복해서 사용하는 공통 영역이 많다.


예를 들어 사이트의 상단 메뉴(헤더), 하단 푸터, 좌측 카테고리 메뉴 같은 부분이 그렇다.

이런 코드를 매번 페이지마다 복사해서 붙여넣는다면, 나중에 디자인을 조금만 수정해도 모든 페이지를 다 고쳐야 하는 비효율적인 상황이 발생한다. 유지보수성이 떨어지고, 실수할 가능성도 높다.

 

이러한 문제를 해결하기 위해 Thymeleaf는 템플릿 조각(fragment)과 레이아웃 기능을 제공한다.
템플릿 조각은 한 번 만들어 두면 여러 화면에서 불러와서 사용할 수 있으므로 재사용성과 유지보수성이 크게 좋아진다.

오늘은 템플릿 조각 정의하기, 불러오기, 파라미터 전달하기 방법을 차례대로 알아보자.

 

1. 컨트롤러 준비하기

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

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

컨트롤러에서는 단순히 fragmentMain.html 템플릿을 보여주도록 설정한다.
이제 뷰에서 템플릿 조각을 불러올 수 있다.

 

2. 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 속성이다.

  • copy : 다른 곳에서 불러올 수 있는 단순한 조각
  • copyParam(param1, param2) : 파라미터를 받아서 동적으로 출력할 수 있는 조각

즉, footer.html 안의 특정 부분을 필요할 때 불러다 쓸 수 있도록 준비한 것이다.

 

3. 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>

여기서는 3가지 방식으로 조각을 불러오고 있다.

  • th:insert : 현재 태그(<div>) 안쪽에 조각을 삽입한다.
  • th:replace : 현재 태그를 완전히 대체한다.
  • 단순 표현식 : ~{...} 는 원칙이지만, 코드가 단순하다면 생략도 가능하다.

그리고 마지막에는 copyParam 조각을 불러올 때 파라미터(데이터1, 데이터2) 를 전달하고 있다.

 

4. 실행 결과

<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>
  • insert : <div> 태그 안에 footer 가 들어갔다.
  • replace : <div> 자체가 사라지고 footer 로 교체되었다.
  • 파라미터 사용 : footer.html 의 copyParam 조각에 '데이터1', '데이터2' 가 전달되어 출력된다.

 

마무리하며:

이번 장에서는 타임리프의 템플릿 조각(Fragment) 기능에 대해 알아보았다.
웹 화면에는 헤더, 푸터, 메뉴처럼 여러 페이지에서 반복해서 사용하는 영역이 많다. 이때 매번 코드를 복사해서 붙여넣으면 유지보수가 힘들고, 작은 변경에도 전체 페이지를 수정해야 하는 비효율이 발생한다.

 

템플릿 조각을 사용하면 이런 문제를 깔끔하게 해결할 수 있다. 한 곳에 공통 코드를 정의해 두고, 필요한 페이지에서 insert나 replace로 가져다 쓰기만 하면 된다. 또 파라미터를 전달할 수 있기 때문에, 상황에 따라 동적으로 다른 내용을 표현하는 것도 가능하다.

 

정리하자면, 템플릿 조각은 코드 재사용성과 유지보수성을 높여주는 강력한 기능이며, 실무 프로젝트에서 화면을 개발할 때 반드시 활용해야 하는 도구라고 할 수 있다.

 

 

감사합니다.

 

'타임리프' 카테고리의 다른 글

[타임리프] 체크박스  (0) 2025.09.17
[Thymeleaf] 템플릿 레이아웃  (0) 2025.09.16
[Thymeleaf] 자바스크립트 인라인  (0) 2025.09.16
[Thymeleaf] 블록  (0) 2025.09.16
[Thymeleaf] 주석  (0) 2025.09.16

티스토리툴바