타임리프(Thymeleaf) - 스프링 뷰 템플릿

java/spring

타임리프(Thymeleaf) - 스프링 뷰 템플릿

danuri 2021. 5. 12. 16:24

gksdudrb922.tistory.com/99

스프링 MVC - 웹 페이지 만들기

스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술 스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술 - 인프런 | 강의 웹 애플리케이션을 개발할 때 필요한 모든 웹 기술을 기초부터 이해하고, 완성할 수 있습니

gksdudrb922.tistory.com

스프링 MVC를 공부하던 중 해당 내용 따로 발췌

타임리프는 스프링의 대표적인 뷰 템플릿 엔진이다.

다음과 같은 타임리프가 적용된 뷰 템플릿 파일을 기반으로 타임리프를 간단히 알아보자.

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <link th:href="@{/css/bootstrap.min.css}"
            href="../css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container" style="max-width: 600px">
    <div class="py-5 text-center">
        <h2>상품 목록</h2>
    </div>
    <div class="row">
        <div class="col">
            <button class="btn btn-primary float-end"
                    onclick="location.href='addForm.html'"
                    th:onclick="|location.href='@{/basic/items/add}'|"
                    type="button">상품 등록</button>
        </div>
    </div>
    <hr class="my-4">
    <div>
        <table class="table">
            <thead>
            <tr>
                <th>ID</th>
                <th>상품명</th>
                <th>가격</th>
                <th>수량</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="item : ${items}">
                <td><a href="item.html" th:href="@{/basic/items/{itemId}(itemId=${item.id})}" th:text="${item.id}">회원id</a></td>
                <td><a href="item.html" th:href="@{|/basic/items/${item.id}|}" th:text="${item.itemName}">상품명</a></td>
                <td th:text="${item.price}">10000</td>
                <td th:text="${item.quantity}">10</td>
            </tr>
            </tbody>
        </table>
    </div>
</div> <!-- /container -->
</body>
</html>

<타임리프 사용 선언>

<html xmlns:th="http://www.thymeleaf.org">

<속성 변경 - th:href>

<link th:href="@{/css/bootstrap.min.css}"
            href="../css/bootstrap.min.css" rel="stylesheet">

타임리프 사용시 이렇게 html태그에 th를 추가하면 렌더링시 href="value1"을 th:href="value2" 값으로 변경한다.(value2가 있을 시)

즉, HTML을 그대로 볼 때는 href 속성이 사용되고, 뷰 템플릿을 거치면 th:href의 값이 href로 대체되면서 동적으로 변경할 수 있다.

-> 대부분의 HTML 속성을 th:xxx로 변경할 수 있다.

<타임리프 핵심>

핵심은 th:xxx가 붙은 부분은 서버사이드에서 렌더링 되고, 기존 것을 대체한다. th.xxx가 없으면 기존 html의 xxx 속성이 그대로 사용된다.

HTML을 파일로 직접 열었을 때는, th:xxx가 있어도 웹 브라우저는 th: 속성을 알지 못하므로 무시한다.

-> 따라서 HTML 파일 보기를 유지하면서 템플릿 기능도 사용할 수 있다.

<link th:href="@{/css/bootstrap.min.css}"
            href="../css/bootstrap.min.css" rel="stylesheet">

@{...} : 타임리프는 URL 링크를 사용하는 경우 @{...}를 사용한다.

+) 참고 : 자바에서 링크를 나타낼 때

1. 앞에 '/'가 붙는다 : host 뒤에 바로 주소를 붙인다.

ex.)

현재 resources/static/css/bootstrap.min.css에 파일을 불러와야 하는 상황

현재 파일 경로 : http://localhost:8080/basic/items.html

Link to /css/bootstrap.min.css -> localhost:8080/css/bootstrap.min.css

그리고 스프링 MVC는 이 경로를 받아서 resources/static/css/bootstrap.min.css를 반환한다.

2. 앞에 '/'가 붙지 않는다 : 현재 디렉토리에서 주소를 붙인다.

ex)

현재 URL : http://localhost:8080/basic/items.html

Link to css/bootstrap.min.css -> http://localhost:8080/basic/css/bootstrap.min.css

이런 파일은 존재하지 않기 때문에 불러올 수 없다.

대안 : ../css/bootstrap.min.css

이러면 http://localhost:8080/css/bootstrap.min.css 경로를 호출하게 되는데 이 역시 스프링 MVC가 경로를 받아

resources/static/css/bootstrap.min.css을 반한할 수 있게 된다.

<속성 변경 - th:onclick>

onclick="location.href='addForm.html'"
th:onclick="|location.href='@{/basic/items/add}'|"

여기에는 다음에 설명하는 리터럴 대체 문법이 사용되었다.

<리터럴 대체 - |...|>

타임리프에서 문자와 표현식은 분리되어 있기 때문에 더해서 사용해야 한다.

th:onclick="'location.href=' + '\'' + @{/basic/items/add} + '\''"

리터럴 대체 문법을 사용하면 다음과 같이 편리하게 사용할 수 있다.

th:onclick="|location.href='@{/basic/items/add}'|"

<반복 출력 - th:each>

<tr th:each="item : ${items}">

이렇게 하면 모델에 포함된 items 컬렉션 데이터가 item 변수에 하나씩 포함되고, 반복문 안에서 item 변수를 사용할 수 있다.

<변수 표현식 - ${...}>

<td th:text="${item.price}">10000</td>
<td th:text="${item.quantity}">10</td>

모델에 포함된 값이나, 타임리프 변수로 선언한 값을 조회할 수 있다.

프로퍼티 접근법을 사용한다 (item.getPrice())

<내용 변경 - th:text>

<td th:text="${item.price}">10000</td>

내용의 값을 th:text의 값으로 변경한다. 여기서는 10000을 ${item.price}로 변경한다.

th:href="@{/basic/items/{itemId}(itemId=${item.id})}"

타임리프 문법을 사용하여 URL 링크 표현식에서 경로 변수 {itemId}를 사용했다.

경로 변수 뿐만 아니라 쿼리 파라미터도 생성 가능하다.

ex)

th:href="@{/basic/items/{itemId}(itemId=${item.id}, query='test')}"

생성 링크: http://localhost:8080/basic/items/1?query=test

th:href="@{|/basic/items/${item.id}|}"

리터럴 대체 문법을 활용해서 간단히 사용할 수도 있다.

+) 참고

타임리프는 순수 HTML 파일을 웹 브라우저에서 열어도 내용을 확인할 수 있고, 서버를 통해 뷰 템플릿을 거치면 동적으로 변경된 결과를 확인할 수 있다.

JSP를 생각해보면, JSP 파일은 웹 브라우저에서 그냥 열면 JSP와 HTML이 섞여 있어 정상적인 확인이 불가능하다. 오직 서버를 통해서 JSP를 열어야 한다.

이렇게 순수 HTML을 그대로 유지하면서 뷰 템플릿도 사용할 수 있는 타임리프의 특징을 네츄럴 템플릿(natural templates)이라 한다.

+) 2021.05.12 추가

<속성 변경 - th:action>

HTML form에서 aciton에 값이 없으면 현재 URL에 데이터를 전송한다.

<form action="item.html" th:action method="post">

예를 들어 상품 등록의 경우 상품 등록 폼의 URL과 상품 등록을 처리하는 URL을 똑같이 맞추고 HTTP 메서드로 두 기능을 구분할 수 있다.

- 상품 등록 폼 : GET /basic/items/add

- 상품 등록 처리 : POST /basic/items/add