[스프링] 타임리프 - 기본기능

gyeol·2023년 11월 16일

스프링

목록 보기

27/50

김영한 님의 '스프링 MVC 2편 - 백엔드 웹 개발 핵심 기술'을 듣고 적은 글입니다.

타임리프

타임리프 특징

서버 사이드 HTML 렌더링 (SSR)
네츄럴 템플릿
스프링 통합 지원

서버 사이드 HTML 렌더링 (SSR)
타임리프는 백엔드 서버에서 HTML을 동적으로 렌더링하는 용도로 사용

네츄럴 템플릿
타임리프는 순수 HTML을 최대한 유지하는 특징이 있다. 타임리프는 작성한 파일을 HTML로 유지하기 때문에 웹브라우저에서 파일을 직접 열어도 내용을 확인할 수 있고, 서버를 통해 템플릿을 거치면 동적으로 변경된 결과를 확인할 수 있다. JSP를 포함한 다른 뷰 템플릿들은 해당 파일을 열면 소스 코드와 HTML이 섞여 정상적인 결과를 확인할 수 없다.
반면 타임리프로 작성된 파일은 해당파일을 그대로 웹 브라우저에서 열어도 정상적인 HTML 결과를 확인할 수 있다. 동적으로 결과가 렌더링되진 않지만 HTML 마크업 결과가 어떻게 되는지 파일만 열어도 바로 확인할 수 있다.
이렇게 순수 HTML을 그대로 유지하면서 뷰 템플릿도 사용할 수 있는 타임리프 특징을 네츄럴 템플릿이라 한다.

스프링 통합 지원
타임리프는 스프링과 자연스럽게 통합되고 스프링의 다양한 기능을 편리하게 사용할 수 있게 지원한다.

타임리프 기본 기능

타임리프 사용 선언 : <html xmlns:th="http://www.thymeleaf.org">

기본 기능

간단한 표현:

변수 표현식: ${...}
선택 변수 표현식: *{...}
메시지 표현식: #{...}
링크 URL 표현식: @{...}
표현식: ~{...}

리터럴

스트링: 'one text', 'Another one!',…
숫자: 0, 34, 3.0, 12.3,…
불린: true, false
널: null
리터럴 토큰: one, sometext, main,…

문자 연산

문자 합치기: +
리터럴 대체: |The name is ${name}|

산술 연산

Binary operators: +, -, *, /, %
Minus sign (unary operator): -

불린 연산

Binary operators: and, or

Boolean negation (unary operator): !, not

비교와 동등

비교: >, <, >=, <= (gt, lt, ge, le)
동등 연산: ==, != (eq, ne)

조건 연산:

If-then: (if) ? (then)
If-then-else: (if) ? (then) : (else)
Default: (value) ?: (defaultvalue)

특별한 토큰

No-Operation: _

텍스트 - text, utext

타임리프의 가장 기본 기능인 텍스트를 출력하는 기능이다. 타임리프는 기본적으로 HTML 태그의 속성에 기능을 정의해 동작한다. HTML 콘텐츠에 데이터를 출력할 때는 th:text를 사용하면 된다. 태그의 속성이 아닌 HTML 콘텐츠 영역 안에서 직접 데이터를 출력하고 싶으면 다음과 같이 [[...]]를 사용하면 된다,

테스트해보기 위해 먼저 BasicController.java 파일을 만들어준다.

package hello.thymeleaf.basic;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
@RequestMapping("/basic")
public class BasicController {
  @GetMapping("/text-basic")
  public String textBasic(Model model) {
    model.addAttribute("data", "Hello Spring!");
    return "basic/text-basic";
  }
}

그리고 연결된 basic/text-basic 경로로 HTML 파일을 만들어준다.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <h1>컨텐츠에 데이터 출력하기</h1>
  <ul>
    <li>th:text 사용 <span th:text="${data}"></span></li>
    <li>컨텐츠 안에서 직접 출력하기 = [[${data}]]</li>
  </ul>
</body>
</html>

Escape

HTML 문서는 <, > 같은 특수 문자를 기반으로 정의한다. 따라서 뷰 템플릿으로 HTML 화면을 생성할 때는 출력하는 데이터에 이런 특수 문자가 있는 것을 주의해 사용해야 한다.

우리가 코드에 "Hello <b>Spring!</b>" 이렇게 적고 웹 브라우저의 실행결과를 확인해보면 Hello <b>Spring!</b>로 출력되고 코드를 확인하면 Hello <b>Spring!</b> 이렇게 괄호가 바뀌어 있음을 확인할 수 있다.

웹 브라우저는 < 를 HTML 태그의 시작으로 인식한다. 따라서 우리는 태그의 시작이 아니라 문자로 표현할 수 있는 방법이 필요한데 이것을 HTML 엔티티 라고 한다. 그리고 이렇게 HTML에서 사용하는 특수 문자를 HTML 엔티티로 변경하는 것을 이스케이프라고 한다. 타임리프가 제공하는 th:text, [[...]]는 기본적으로 이스케이프를 제공한다.

Unescape

이스케이프 기능을 사용하지 않으려면 th:inline="none" 이라는 기능을 사용한다.

<ul>
  <li><span th:inline="none">[[...]] = </span>[[${data}]]</li>
  <li><span th:inline="none">[(...)] = </span>[(${data})]</li>
</ul>

th:inline="none"은 타임리프는 [[...]]를 해석하기 때문에 화면에 [[...]] 글자를 보여줄 수 없다. 이 태그 안에서는 타임 리프가 해석하지 말라는 옵션이다.

변수 - SpringEL

타임리프에서 변수를 사용할 때는 변수 표현식${...}를 사용한다. 그리고 이 변수 표현식에는 스프링 EL이라는 스프링이 제공하는 표현식을 사용할 수 있다.

BasicController.java에 코드를 추가해준다.

	@GetMapping("/variable")
    public String variable(Model model){
        User userA = new User("userA", 10);
        User userB = new User("userB", 20);

        List<User> list = new ArrayList<>();
        list.add(userA);
        list.add(userB);

        Map<String, User> map = new HashMap<>();
        map.put("userA", userA);
        map.put("userB", userB);

        model.addAttribute("user", userA);
        model.addAttribute("users", list);
        model.addAttribute("userMap", map);

        return "basic/variable";
    }
    
    @Data
    static class User{
        private String username;
        private int age;

        public User(String username, int age) {
            this.username = username;
            this.age = age;
        }
    }

그리고 HTML 파일도 만들어준다.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <h1>SpringEL 표현식</h1>
  <ul>Object
    <li>${user.username} = <span th:text="${user.username}"></span></li>
    <li>${user['username']} = <span th:text="${user['username']}"></span></li>
    <li>${user.getUsername()} = <span th:text="${user.getUsername()}"></span></li>
  </ul>
  <ul>List
    <li>${users[0].username} = <span th:text="${users[0].username}"></span></li>
    <li>${users[0]['username']} = <span th:text="${users[0]['username']}"></span></li>
    <li>${users[0].getUsername()} = <span th:text="${users[0].getUsername()}"></span></li>
  </ul>
  <ul>Map
    <li>${userMap['userA'].username} = <span th:text="${userMap['userA'].username}"></span></li>
    <li>${userMap['userA']['username']} = <span th:text="${userMap['userA']['username']}"></span></li>
    <li>${userMap['userA'].getUsername()} = <span th:text="${userMap['userA'].getUsername()}"></span></li>
  </ul>

  <h1>지역 변수 - (th:with)</h1>
  <div th:with="first=${users[0]}">
    <p>처음 사람의 이름은 <span th:text="${first.username}"></span></p>
  </div>
</body>
</html>

SpringEL 다양한 표현식 사용

Object

user.username : user의 username을 프로퍼티 접근 -> user.getUsername()
user['username'] : 위와 동일 -> user.getUsername()
user.getUsername() : user의 getUsername()을 직접 호출

List

users[0\].username : List에서 첫 번째 회원을 찾고 username 프로퍼티 접근 -> list.get(0).geUsername()
user[0][['username'] : 위와 동일
users[0].getUsername() : List에서 첫 번째 회원을 찾고 메서드 직접 호출

Map

userMap['userA'].username : Map에서 userA를 찾고, username 프로퍼티 접근 -> map,get("userA").getUsername()
userMap['userA'][['username'] : 위와 동일
userMap[userA'].getUsername() : Map에서 userA를 찾고 메서드 직접 호출

지역변수 선언

th:width를 사용하면 지역 변수 선언해 사용할 수 있다. 지역 변수는 선언한 태그 안에서만 사용 가능하다.

<h1>지역 변수 - (th:with)</h1>
<div th:with="first=${users[0]}">
  <p>처음 사람의 이름은 <span th:text="${first.username}"></span></p>
</div>

URL 링크

타임리프에서 URL을 생성할 때는 @{...} 문법을 사용하면 된다.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <h1>URL 링크</h1>
  <ul>
    <li><a th:href="@{/hello}">basic url</a></li>
    <li><a th:href="@{/hello(param1=${param1}, param2=${param2})}">hello query param</a></li>
    <li><a th:href="@{/hello/{param1}/{param2}(param1=${param1}, param2=${param2})}">path variable</a></li>
    <li><a th:href="@{/hello/{param1}(param1=${param1}, param2=${param2})}">path variable + query parameter</a></li>
  </ul>
</body>
</html>

단순한 URL

@{/hello} -> /hello

쿼리 파라미터

@{/hello(param1=${param1}, param2=${param2})} -> /hello?param1=data1&param2=data2
( ) 안에 있는 부분은 쿼리 파라미터로 처리 된다.

경로 변수

@{/hello/{param1}/{param2}(param1=${param1}, param2=${param2})} -> /hello/data1/data2
URL 경로상 변수가 있으면 ( ) 부분은 경로변수로 처리된다.
즉 param1은 data1로, param2는 data2로 바뀐다.

경로변수 + 쿼리 파라미터

@{/hello/{param1}(param1=${param1}, param2=${param2})} -> /hello/data1?param2=data2
경로 변수와 쿼리파라미터를 함께 사용할 수 있다.

리터럴

리터럴은 소스 코드상에 고정된 값을 말하는 용어이다.
타임리프에는 다음과 같은 리터럴이 있다.

문자 : hello
숫자 : 10
불린 : true, false
null : null

타임리프에서 문자 리터럴은 항상 작은 따옴표로 감싸야 한다.
<span th:text="'hello'">

그런데 항상 문자를 작은 따옴표로 감싸는 것은 너무 귀찮기에 공백 없이 쭉 이어진다면 하나의 의미있는 토큰으로 인지해 다음과 같이 작은 따옴표를 생략할 수 있다. 공백이 있다면 꼭 작은 따옴표로 감싸줘야한다.
룰 : A-Z , a-z , 0-9 , [] , . , - , _

리터럴 대체 문법인 <span th:text="|hello ${data}|"> 형태로 적어주면 템플릿을 사용하는 것처럼 편리하게 사용 가능하다.

속성 값 설정

타임리프는 주로 HTML 태그에 th:* 속성을 지정하는 방식으로 동작한다. 속성을 적용하면 기존 속성을 대체한다. 기존 속성이 없으면 새로 만든다.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <h1>속성 설정</h1>
  <input type="text" name="mock" th:name="userA" />
  <h1>속성 추가</h1>
  - th:attrappend = <input type="text" class="text" th:attrappend="class='large'" /><br/>
  - th:attrprepend = <input type="text" class="text" th:attrprepend="class='large'" /><br/>
  - th:classappend = <input type="text" class="text" th:classappend="large" /><br/>
  <h1>checked 처리</h1>
  - checked o <input type="checkbox" name="active" th:checked="true" /><br/>
  - checked x <input type="checkbox" name="active" th:checked="false" /><br/>
  - checked=false <input type="checkbox" name="active" checked="false" /><br/>
</body>
</html>

속성 설정

<inputtype="text" name="mock" th:name="userA" /> -> 타임리프 렌더링 후 <input type="text" name="userA" />

속성 추가

th:attrappend : 속성 값의 뒤에 값 추가
th:attrprepend : 속성 값의 앞에 값 추가
th:classappend : class 속성에 자연스럽게 추가

checked 처리

HTML에서는 <input type="checkbox" name="active" checked="false" /> 이 경우에도 checked 속성이 있기에 checked 처리가 되버린다. 즉 checked 속성 값과 상관없이 checked 라는 속성만 있어도 체크가 된다.
타임리프의 th:checked는 값이 false인 경우 checked 속성 자체를 제거한다.
<input type="checkbox" name="active" th:checked="false" /> -> <input type="checkbox" name="active" />

반복

타임리프에서 반복은 th:each를 사용한다. 추가로 반복에서 사용할 수 있는 여러 상태 값을 지원한다.

조건부 평가

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<h1>if, unless</h1>
<table border="1">
  <tr>
    <th>count</th>
    <th>username</th>
    <th>age</th>
  </tr>
  <tr th:each="user, userStat : ${users}">
    <td th:text="${userStat.count}">1</td>
    <td th:text="${user.username}">username</td>
    <td>
      <span th:text="${user.age}">0</span>
      <span th:text="'미성년자'" th:if="${user.age lt 20}"></span>
      <span th:text="'미성년자'" th:unless="${user.age ge 20}"></span>
    </td>
  </tr>
</table>
<h1>switch</h1>
<table border="1">
  <tr>
    <th>count</th>
    <th>username</th>
    <th>age</th>
  </tr>
  <tr th:each="user, userStat : ${users}">
    <td th:text="${userStat.count}">1</td>
    <td th:text="${user.username}">username</td>
    <td th:switch="${user.age}">
      <span th:case="10">10살</span>
      <span th:case="20">20살</span>
      <span th:case="*">기타</span>
    </td>
  </tr>
</table>
</body>
</html>

if, unless

타임리프는 해당 조건이 맞지 않으면 태그 자체를 렌더링하지 않는다. 만약 다음 조건이 false인 경우 <span>...<span> 부분 자체가 렌더링되지 않고 사라진다.

switch

*은 만족하는 조건이 없을 때 사용하는 디폴트이다.

주석

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <h1>예시</h1>
  <span th:text="${data}">html data</span>
  <h1>1. 표준 HTML 주석</h1>
  <!--
  <span th:text="${data}">html data</span>
  -->
  <h1>2. 타임리프 파서 주석</h1>
  <!--/* [[${data}]] */-->
  <!--/*-->
  <span th:text="${data}">html data</span>
  <!--*/-->
  <h1>3. 타임리프 프로토타입 주석</h1>
  <!--/*/
  <span th:text="${data}">html data</span>
  /*/-->
</body>
</html>

1. 표준 HTML 주석

자바스크립트의 표준 HTML 주석은 타임리프가 렌더링하지 않고 그대로 남겨둔다.

2. 타임리프 파서 주석

타임리프 파서 주석은 타임리프의 진짜 주석으로 렌더링에서 주석 부분을 제거한다.

3. 타임리프 프로토타입 주석

타임리프 프로토타입은 HTML 파일을 웹 브라우저에서 그대로 열어보면 HTML 주석이기 때문에 이 부분은 웹 브라우저가 렌더링하지 않는다. 타임리프 렌더링을 거치면 이 부분이 정상 렌더링된다.
HTML 파일을 그대로 열어보면 주석처리가 되지만 타임리프를 렌더링 한 경우에만 보이는 주석이다.

자바스크립트 인라인

타임리프는 자바스크립트에서 타임리프를 편리하게 사용할 수 있는 자바스크립트 인라인 기능을 제공한다.
<script th:inline="javascript">다음과 같이 적용하면 된다.

텍스트 렌더링

var username = [[${user.username}]];
-> 인라인 사용 전 var username = userA;
-> 인라인 사용 후 var username = "userA";

인라인 사용 전 렌더링 결과를 보면 변수 이름이 그대로 남아있다. 타임리프 입장에서는 렌더링한 것이지만 개발자가 기대한 내용은 "userA"라는 문자이기에 결과적으로 userA가 변수명으로 사용되어 자바스크립트 오류가 발생한다.
인라인 사용후 렌더링 결과를 보면 문자 타입의 경우 "를 포함해준다.

내추럴 템플릿

타임리프는 HTML파일을 직접 열어도 동작하는 내추럴 템플릿 기능을 제공한다. 자바스크립트 인라인 기능을 사용하면 주석을 활용해서 이 기능을 사용할 수 있다.

var username2 = /*[[${user.username}]]*/ "test username";
-> 인라인 사용 전 var username2 = /*userA*/ "test username";
-> 인라인 사용 후 var username2 = "userA";

인라인 사용 전 결과를 보면 정말 순수하게 그대로 해석해버렸다.따라서 내추럴 템플릿 기능이 동작하지 않았고 렌더링 내용이 주석처리 되어 버린다.
인라인 사용 후 결과를 보면 주석 부분이 제거되고 기대한 userA 가 적용된다.

객체

타임리프의 자바스크립트 인라인 기능을 사용하면 객체를 JSON으로 자동변환 해준다.

var user = [[${user}]];
-> 인라인 사용 전 var user = BasicController.User(username=userA, age=10);
-> 인라인 사용 후 var user = {"username":"userA","age":10};

인라인 사용 전은 객체의 toString()이 호출된 값이다.
인라인 사용 후 객체를 JSON으로 변환해준다.

템플릿 조각

웹 페이지를 개발할 때 공통 영역이 많이 있다. 중복 부분을 코드를 복사해 사용하면 변경 시 여러 페이지를 다 수정해야 하기에 상당히 비효율적이다. 타임리프는 이런 문제를 해결하기 위해 템플릿 조각과 레이아웃 기능을 지원한다.

이해해보기 위해 TemplateController.java 클래스를 만들어보자.

package hello.thymeleaf.basic;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
@RequestMapping("/template")
public class TemplateController {
  @GetMapping("/fragment")
  public String template() {
  	return "template/fragment/fragmentMain";
  }
}

해당 HTML 파일도 만들어준다. 먼저 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>

그리고 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>

위 코드의 template/fragment/footer :: copy :template/fragment/footer.html 템플릿에 있는 th:fragment="copy"라는 부분을 템플릿 조각으로 가져와서 사용한다는 의미이다.

부분포함 replace

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

코드를 실행하면

<h2>부분 포함 insert</h2>
<div>
  <footer>
  푸터 자리 입니다.
  </footer>
</div>

fragmentMain.html의 코드 일부분이 들어와서 이렇게 바뀐다.

부분 포함 단순 표현식

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

원래는 ~{...}를 사용하는 것이 원칙이지만 템플릿 조각을 사용하는 코드가 단순하면 이 부분을 생략할 수 있다.
결과는 위의 결과와 동일하다

파라미터사용

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

템플릿 레이아웃

이 전에는 일부 코드 조각을 가지고와서 사용했다면 이번엔 개념을 더 확장해 코드 조각을 레이아웃에 넘겨서 사용하는 방법에 대해 알아보자.

<head> 정도에만 적용할 수도 있고 <html> 전체에도 적용할 수 있다.

앞서 만든 클래스에 이 부분을 추가해준다.

@GetMapping("/layout")
public String layout() {
	return "template/layout/layoutMain";
}

먼저 base.html 을 만들어보자.

<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="common_header(title,links)">
<title th:replace="${title}">레이아웃 타이틀</title>

<!-- 공통 -->
<link rel="stylesheet" type="text/css" media="all" th:href="@{/css/awesomeapp.css}">
<link rel="shortcut icon" th:href="@{/images/favicon.ico}">
<script type="text/javascript" th:src="@{/sh/scripts/codebase.js}"></script>

<!-- 추가 -->
<th:block th:replace="${links}" />
</head>

그리고 layoutMain.html 파일도 만들어주자.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="template/layout/base :: common_header(~{::title},~{::link})">
  <title>메인 타이틀</title>
  <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
  <link rel="stylesheet" th:href="@{/themes/smoothness/jquery-ui.css}">
</head>
<body>
	메인 컨텐츠
</body>
</html>

이 코드를 실행해보면

<!DOCTYPE html>
<html>
<head>
<title>메인 타이틀</title>

  <!-- 공통 -->
  <link rel="stylesheet" type="text/css" media="all" href="/css/awesomeapp.css">
  <link rel="shortcut icon" href="/images/favicon.ico">
  <script type="text/javascript" src="/sh/scripts/codebase.js"></script>

  <!-- 추가 -->
  <link rel="stylesheet" href="/css/bootstrap.min.css">
  <link rel="stylesheet" href="/themes/smoothness/jquery-ui.css">
</head>
<body>
	메인 컨텐츠
</body>
</html>

이렇게 나옴을 확인할 수 있다. 이 코드에서 common_header(~{::title}, {::link}) 이 부분이 핵심이다. ::title은 현재 페이지의 title 태그들을 전달한다. ::link는 현재 페이지의 link 태그들을 전달한다.

결과를 봤을 때 메인 타이틀이 전달한 부분으로 잘 교체되었고 공통 부분은 그대로 유지되고 추가 부분에 전달된 <link> 들이 포함된 것을 확인할 수 있다.

이를 조금 더 확장해보자!

@GetMapping("/layoutExtend")
public String layoutExtends() {
	return "template/layoutExtend/layoutExtendMain";
}

앞서 만든 자바 클래스에 위의 코드를 추가해주고 layoutFile.html과 layoutExtendMain.html 파일을 만들어주자.

//layoutFile.html

<!DOCTYPE html>
<html th:fragment="layout (title, content)" xmlns:th="http://www.thymeleaf.org">
<head>
	<title th:replace="${title}">레이아웃 타이틀</title>
</head>
<body>
	<h1>레이아웃 H1</h1>
	<div th:replace="${content}">
		<p>레이아웃 컨텐츠</p>
	</div>
	<footer>
		레이아웃 푸터
	</footer>
</body>
</html>

//layoutExtendMain.html

<!DOCTYPE html>
<html th:replace="~{template/layoutExtend/layoutFile :: layout(~{::title}, ~{::section})}"xmlns:th="http://www.thymeleaf.org">
<head>
	<title>메인 페이지 타이틀</title>
</head>
<body>
	<section>
		<p>메인 페이지 컨텐츠</p>
		<div>메인 페이지 포함 내용</div>
	</section>
</body>
</html>

실행해보면

<!DOCTYPE html>
<html>
<head>
	<title>메인 페이지 타이틀</title>
</head>
<body>
	<h1>레이아웃 H1</h1>
	<section>
		<p>메인 페이지 컨텐츠</p>
		<div>메인 페이지 포함 내용</div>
	</section>
	<footer>
	레이아웃 푸터
	</footer>
</body>
</html>

<html> 자체를 th:replace를 사용해 변경하는 것을 확인할 수 있다. 결국 layoutFile.html에 필요한 내용을 전달하면서 <html> 자체를 layoutFile.html로 변경한다.

gyeol

공부 기록 공간 '◡'

이전 포스트