FRONT

[Thymeleaf] 타임리프 란?

dbelleloper 2023. 7. 10. 16:16
728x90

1. 타임리프 란?

백엔드 서버에서 HTML을 동적으로 렌더링 하는 용도로 사용됨

페이지가 어느정도 정적이로 빠른 생산성이 필요한 경우 백엔드 개발자가 개발해야하는 일이 생긱는데 이때 좋은 선택지

 

 

2. 사용법

Gradle - build.gradle

implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'

또는

Maven - pom.xml

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

 

타임리프를 사용할 html 파일에 다음과 같이 태그 수정

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

 

 

3. 문법

대부분의 html 속성을  th:xxx 로 변경

ex: th:text="${변수명}"

표현 설명 예제
@{ ... } URL 링크 표현식 th:href="@{/css/bootstrap.min.css}"
th:href="@{/{itemId}/edit(itemId=${item.id})}"
| ... | 리터럴 대체 th:text="|Hi ${user.name}!|"
(= th:text="'Hi '+${user.name}+'!'"
${ ... } 변수 th:text=${user.name}
th:each 반복 출력 <tr th:each="item: ${items}">
  <td th:text="${item.price}">100</td>
</tr>
*{ ... } 선택 변수 <tr th:object="${items}">
  <td th:text="*{price}">100</td>
</tr>
#{ ... } 메시지. properties 같은 외부 자원에서 코드에 해당하는 문자열 get. th:text="#{member.register}"

 

간단한표현

  • 변수 표현식  ${...}  ex) 텍스트- text( th:text ), utext( [[...]] )
  • 선택 변수 표현식 *{...}
  • 메세지 표현식  #{...}
  • 링그 url 표현식  @{...}
  • 조각 표현식 ~{...}

조건 연산

  • [th:if] [th:if]
  • [th:if] [th:unless]
728x90