상품 목록 - 타임리프

타임리프 핵심

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

0. 타임리프 사용 선언

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

변수 표현식 - ${...} 모델에 포함된 값이나, 타임리프 변수로 선언한 값을 조회할 수 있다. 프로퍼티 접근법을 사용한다. ( item.getPrice() )

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

2. 내용 변경 - th:text 내용의 값을 th:text 의 값으로 변경한다. 여기서는 10000을 ${item.price} 의 값으로 변경한다. <td> .. </td> 태그 사이에 들어가있는 텍스트가 무엇이든 이 텍스트를 ${} 변수 값으로 치환한다!

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

3. 속성 변경 - th:href

th:href="@{/css/bootstrap.min.css}"
원래 href를 th:href 로 변경한다.
타임리프 뷰 템플릿을 거치게 되면 원래 값을 th:xxx 값으로 변경한다. 만약 값이 없다면 새로 생성한다.
HTML을 그대로 볼 때는 href 속성이 사용되고, 뷰 템플릿을 거치면 th:href 의 값이 href 로 대체되면서 동적으로 변경할 수 있다.
대부분의 HTML 속성을 th:xxx 로 변경할 수 있다.

4. URL 링크 표현식 (css 경로 지정, 링크 주소 설정) 4-1. URL 링크 표현식 - @{...}

th:href="@{/css/bootstrap.min.css}"

4-2. URL 링크 표현식 - @{...} : 경로 변수, 쿼리 파라미터 설정 {..}로 경로 변수 넣고 바로 뒤에 (..)로 변수값 설정 해준다. {itemId}(itemId=${item.id})

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

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

4-3. URL 링크 간단히 (리터럴 대체 문법을 사용해서 | |만 추가하고 변수명으로 링크 설정 가능!)

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

5. 속성 변경 - th:onclick

onclick="location.href='addForm.html'"

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

6. 리터럴 대체 - |...|

<span th:text="'Welcome to our application, ' + ${user.name} + '!'">

<span th:text="|Welcome to our application, ${user.name}!|">

리터럴 대체 문법을 사용하면 상품 등록으로 이동하는 페이지를 다음과 같이 편리하게 사용할 수 있다.

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

7. 반복 출력 - th:each 컬렉션의 수 만큼 이 하위 테그를 포함해서 생성된다.

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

Last updated 3 years ago

Was this helpful?