상품 목록 - 타임리프
타임리프 핵심
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})}"경로 변수( {itemId} ) 뿐만 아니라 쿼리 파라미터도 생성한다. http://localhost:8080/basic/items/1?query=test
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
Was this helpful?