💻 타임 리프 선언하기
<html xmlns:th="http://www.thymeleaf.org">
👩💻 속성변경 - th:href
💡 th:href="@{/css/bootstrap.min.css}"
: href="value1"을 th:href="value2"의 값으로 치환한다.
HTML을 그대로 보면href속성이 사용되고, 뷰 템플릿을 거치면th:href의 값이 href로 대체되면서 동적으로 변경 가능하다.
👩💻 URL 링크 표현식 - @{...}
타임리프는 URL링크를 사용하는 경우
@{...}를 사용한다. 이것을 URL 링크 표현식이라고 한다.
👩💻 URL 링크 표현식2 - @{...}
💡 <a href="item.html" th:href="@{/basic/items/{itmeId}(itemId=${item.id})}"
: URL 링크 표현식을 사용하면 경로를 템플릿처럼 편리하게 사용 가능하다. 경로 변수 {itemId}뿐만 아니라 쿼리 파라미터도 생성 가능하다.
- ex)
th:hred="@{/basic/items/{itemId}(itemId=${item.id}, query='test')}"
👉 http://localhost:8080/basic/items/1?query=test
상품등록 폼으로 이동
th:onclick="|location.href='@{/basic/items/add}'|"
📌리터럴 대체 문법 =
|...|
- 타임리프에서는 문자와 표현식 등은 분리되어 있기 때문에 더해서 사용해야한다.
<span th:text="'Welcome'+ ${user.name}+ '!'">- 리터럴 대체문법을 사용하면, 더하기 없이 편리하게 사용 가능하다.
<span th:text="|Welcome ${user.name} !|" >
상품수정 링크
th:onclick="|location.href='@{/basic/items/{itemId}/edit(itemId=${item.id})}'|"
🔑(itemId=${item.id}) -> {itemId}로 치환
👩💻 속성 변경- th:value
- value="1" th:value="${item.id}"
- value="상품A" th:value="${item.itemName}"
👩💻 속성 변경 - th:action
👉 th:action에 값이 없으면 현재 url에 데이터를 전송한다.
ex) /basic/items/add
👩💻 반복 출력- th:each
<th:each="item : ${items}">
: model에 있는 items를 꺼내 item에 넣어준다. 반복문에서 item변수를 사용할 수 있다.
👩💻 변수 표현식 ${...}
th:text="${item.id}"
: 모델에 포함된 값이나, 타임리프 변수로 선언한 값을 조회할 수 있다. 프로퍼티 접근법을 사용한다.
👩💻 내용 변경 th:text
< td th:text="${item.price}">10000 < /td >
: 내용의 값을 th:text의 값으로 변경한다.
10000을 ${item.price}의 값으로 변경한다.
