카테고리 없음

Thymeleaf란? 타임리프 문법 정리

코딍코딍 2022. 6. 30. 11:54

타임리프

스프링 부트에서 공식 지원하는 View 템플릿(HTML을 편리하게 생성하는 뷰 기능)
타임리프는 순수 HTML을 그대로 유지하면서 뷰 템플릿도 사용할 수 있는 네츄럴 템플릿 (natural templates)이다.
뷰 템플릿에는 타임리프 이외에 프리마커, JSP 등이 있다.

 

 

타임리프 사용 선언

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

 

 

타임리프 핵심

  • 핵심은 th:xxx 가 붙은 부분은 서버사이드에서 렌더링 되고, 기존 것을 대체한다. th:xxx 이 없으면 기존 html의 xxx 속성이 그대로 사용된다.
  • HTML을 파일로 직접 열었을 때, th:xxx 가 있어도 웹 브라우저는 th: 속성을 알지 못하므로 무시한다.
  • 따라서 HTML을 파일 보기를 유지하면서 템플릿 기능도 할 수 있다.

 

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

<td th:text="${item.id}">1</td>
  • 모델에 포함된 값이나, 타임리프 변수로 선언한 값을 조회할 수 있다.
  • 프로퍼티 접근법을 사용한다. ( item.getId() )

 

th:xxx

타임리프 뷰 템플릿을 거치게 되면 원래 값을 th:xxx 값으로 변경한다. 만약 값이 없다면 새로 생성한다.
대부분의 HTML 속성을 th:xxx 로 변경할 수 있다.

 

 

내용 변경 - th:text

<h2 th:text="'저장 완료'"></h2>
<td th:text="${item.price}">10000</td>
  • 내용의 값을 th:text 의 값으로 변경한다.
  • 여기서는 10000을 ${item.price} 의 값으로 변경한다.

 

반복 출력 - th:each

<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/{itemId} (itemId=${item.id})}" th:text="${item.itemName}">상품명</a></td>
    <td th:text="${item.price}">가격</td>
    <td th:text="${item.quantity}">수량</td>
</tr>

 

 

 

  • 반복은 th:each 를 사용한다. 이렇게 하면 모델에 포함된 items 컬렉션 데이터가 item 변수에 하나씩 포함되고, 반복문 안에서 item 변수를 사용할 수 있다.
  • 컬렉션의 수 만큼 <tr>..</tr> 이 하위 태그를 포함해서 생성된다.

 

속성 변경 - th:href 

<link th:href="@{/value2}"
        href="/value1" rel="stylesheet">
  • href="/value1" 을 th:href="/value2" 의 값으로 변경한다.
  • HTML을 그대로 볼 때는 href 속성이 사용되고, 뷰 템플릿을 거치면 th:href의 값이 href로 대체되면서 동적으로 변경된다.

 

URL 링크 표현식 - @{...}

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

#href="/basic/items/1?query=test
#생성 링크: http://localhost:8080/basic/items/1?query=test
타임리프는 URL 링크를 사용하는 경우 @{...} 를 사용한다. 이것을 URL 링크 표현식이라 한다.
URL 링크 표현식을 사용하면 서블릿 컨텍스트를 자동으로 포함한다.

 

URL 링크 간단히

  • th:href="@{| /basic/items/${item.id} |}" 
  • 리터럴 대체 문법을 활용해서 간단히 사용할 수도 있다.

 

속성 변경 - th:onclick

<button onclick="location.href='addForm.html'"
        th:onclick="|location.href='@{/basic/items/add}'|">상품 등록</button>
  • onclick="location.href='addForm.html'"을 onclick="location.href='/basic/items/add'"로 변경한다.

 

리터럴 대체 - |...|

  • 타임리프에서 문자와 표현식 등은 분리되어 있기 때문에 더해서 사용해야 한다.
    • <span th:text=" 'Hello, ' + ${user.name} + '!' ">
    • th:onclick="'location.href=' + '\'' + @{/basic/items/add} + '\''"
  • 다음과 같이 리터럴 대체 문법을 사용하면, 더하기 없이 편리하게 사용할 수 있다.
    • <span th:text="|Hello, ${user.name}!|">
    • th:onclick="|location.href='@{/basic/items/add}'|"

 

 

속성 변경 - th:action

<form action="item.html" th:action="@{/basic/items/add}" method="post">

 

조건 - th:if

<h2 th:if="${param.status}" th:text="'저장 완료'"></h2>
  • th:if="xx"
    • xx가 true이면 th:text="'저장 완료'" 실행한다.
  • param.status : 요청 파라미터의 status 값을 의미한다.
    • param는 요청 파라미터의 값을 꺼낼 때 쓰이고 타임리프에서 지원한다.