Spring

타임리프 문법

yougeun 2023. 3. 15. 21:08
728x90

타임리프 사용 선언

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

 

속성 변경 th:href

<link th:href="@{/css/bootstrap.min.css}"
        href="../css/bootstrap.min.css" rel="stylesheet">

href="value1" 을 th:href="value2"의 값으로 변경한다.

HTML을 그냥 볼때는 value1으로 뷰 템플릿을 거치게 되면 th의 href로 대체되면서 동적으로 변경 할 수 있다.

 

URL 링크식 @{...}

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

.타임리프에서 URL 링크를 사용하는 경우 @{...}를 사용한다.

경로 변수{item.id}뿐만 아니라 쿼리파라미터인 query도 쉽게 가능하다.

 

 

 리터럴 대체문법 |...|

타임리프에서 문자와 표현식 등은 분리되어 있기 때문에 더해서 사용해야 한다.

(1)리터럴 대체문법을 사용하지 않았을 때

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

(2)리터럴 대체문법을 사용했을 때

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

 

변수 표현식 ${...}

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

모델에 포함된 값이나,타임리프 변수로 선언한 값을 조회할 수 있다.

 

내용 변경 th:text

<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/${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>

모델에 포함된 items 컬렉션 데이터가 item 변수에 하나씩 포함되고 반복문 안에서 item변수를 사용 할 수 있다.

컬렉션의 수만큼 <tr>...</tr>이 하위 태그를 포함해서 생성한다.

728x90