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
'FRONT' 카테고리의 다른 글
| [React] Git Bash를 이용하여 리엑트 실행 및 리엑트 파일 만들기 (0) | 2023.07.14 |
|---|---|
| [Thymeleaf] header footer side 나누기 (타임리프 기반) (0) | 2023.07.13 |
| [JavaScript 자바스크립트] - 현재 날짜, 시간 가져오기 (2) | 2022.09.23 |
| [JavaScript 자바스크립트] let, const, var의 모든 것 (0) | 2022.08.09 |
| [JavaScript 자바스크립트] 일정 시간 뒤 함수 실행 setTimeout() (0) | 2022.08.04 |