thymeleaf: insert 와 replace 차이

이진우·2024년 8월 2일

thymeleaf 를 사용하여 프로젝트를 진행하던 도중
새미 프로젝트 때 썼던 <@! include > 를 사용해서 코드의 길이를 줄이고 싶은 마음이 생겼습니다.
thymeleaf 도 비슷한 방법이 있을까 찾아보다가 두가지의 방법이 있어 쓰임의 차이점에 대해 적어보고 사용하려 합니다.

들어가기에 앞서 insert 와 replace 를 쓰기위해 먼저 코드를 묶는 코드를 알아야 합니다.

th:fragment

fragment 는 replace 나 insert 통해 가져와서 쓰일 태그 묶음을 묶어주는 방법입니다.

쓰는 방법은

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

    <nav class="navbar" th:fragment="nav">
         <h1>hello, world!</h1>
    </nav>
</html>

thymeleaf 선언해주고, 묶어줄 태그안에 th:fragment="[ 조각 이름 ]" 을 적어주면 됩니다.

insert 와 replace의 쓰임

th:insert

우선 insert 는 크게 현재 태그를 유지하면서 템플릿 조각을 가져오는 방법 이라고 합니다.
쓸 수 있는 코드 방식은

<div th:insert="~{ [ 템플릿 조각 경로 ] :: 조각명}" />

th:replace

replace 는 말 그대로 대체하는 방법입니다. 현재 태그를 템플릿 조각에 있는 태그로 대체하는 방법 입니다.
쓰는 코드 방식은

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

insert 와 replace 의 차이

두 개 모두 fragment 로 묶어진 코드를 불러온다는 것은 똑같지만 불러 올 때에 약간의 차이점을 가지고있습니다.

insert : insert 는 fragment 에 묶어진 전체 내용을 포함 위치에 대체하여 보여줍니다.
replace : replace 는 fragment 에 묶어진 내용을 포함위치 안에 삽입합니다.

예시를 통해 시각적으로 보여드리도록 하겠습니다.

insert 사용

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
  <body>
      <div th:include="fragments/nav.html :: nav"></div>
  </body>
</html>

위 fragment 코드를 가져와 쓰는 th:insert 문을 작성하였습니다.
div 태그 안에 속성으로 thymeleaf 를 넣어 실제 화면에는 nav 태그가 추가되도록 하였습니다.

우선 별 문제 없이 잘 실행되는 것을 볼 수 있습니다.

이제 화면에 띄어진 코드를 검사해보면

insert 코드 검사

div 태그 안에 nav 태그가 포함되어 있는것을 볼 수 있습니다.

이처럼 insert는 th:insert 를 쓴 태그를 포함하여 삽입하는 형식이고,

replrace 사용

replace 코드도 insert 때와 같이

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div th:replace="fragments/nav.html :: nav"></div>
<hr>
</body>
</html>