[thymeleaf] th:replace

Hyun·2023년 8월 7일

점프 투 스프링부트

목록 보기

3/4

th:relace=" :: "

Thymeleaf 템플릿 엔진에서 사용되는 속성으로, 템플릿을 사용하여 HTML 페이지의 일부를 동적으로 삽입하거나 재사용하는 기능을 제공한다.

ex)

fragments/header.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="header">
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrinkto-fit=no">
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="/css/bootstrap.min.css" integrity="sha384-
ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
        crossorigin="anonymous">
  <!-- Custom styles for this template -->
  <link href="/css/jumbotron-narrow.css" rel="stylesheet">
  <title>Hello, world!</title>
</head>

home.html

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragments/header :: header">
    <title>Hello</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<!-- 내용 생략 -->
</body>
</html>

home.html 의 head 태그의 th:replace="fragments/header :: header" 속성은 fragments/header.html 에 위치한 th:fragment="header" 를 속성으로 가지는 태그의 내용을 th:replace="fragments/header :: header" 를 속성으로 가지는 태그 아래 동적으로 삽입하는 기능을 제공한다.

이때 삽입될 내용 중 home.html 파일에 들어있는 코드와 중복되는 부분을 제거하고 공통부분은 재사용하여 효율적인 코드 관리를 가능하게 한다.

ex) <title>Hello</title> 가 이미 있으므로 header.html 파일에 있는 <title>Hello, world!</title> 는 삽입되지 않는다.

따라서 실제 home.html 에 들어있는 th:replace="fragments/header :: header" 를 속성으로 가지는 태그 아래의 내용은 다음과 같다.

home.html 뜯어본 구조

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrinkto-fit=no">
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="/css/bootstrap.min.css" integrity="sha384-
ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
        crossorigin="anonymous">
  <!-- Custom styles for this template -->
  <link href="/css/jumbotron-narrow.css" rel="stylesheet">
  <title>Hello</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<!-- 페이지의 내용이 들어갈 부분 -->
</body>
</html>