타임리프란 ?
- View Template(뷰 템플릿)을 컨트롤러가 전달하는 데이터를 이용하여
- html태그를 기반으로하여 th:속성을 이용하여 동적인 View를 제공합니다.
타임리프 핵심
- 핵심은 "th:xxx"가 붙은 부분은 서버사이드에서 렌더링 되고, 기존 것을 대체한다. thx:xxx가 없으면 기존 html의 xxx속성이 그대로 사용된다.
- HTML을 파일로 직접 열었을때, th:xxx가 있어도 웹브라우저는 ht: 속성을 알지 못함으로 무시한다.
- 따라서 HTML을 파일 보기를 유지하면서 템플릿 기능도 할 수 있다.
타임리프 사용
- 타임리프 라이브러리 추가
- html 태그에 다음과 같이 추가
<html xmlns:th="http://www.thymeleaf.org"> // 타임리프의 속성으로 쓰이는 th:html 속성으로 변경.
@{URL 링크}
- @{URL 링크} : 타임리프는 URL 링크를 사용하는 경우 @{...}을 사용한다.
- 예 ) th:href="@{|/basic/items/${item.id}|}"
리터널 대체 '|...|'
- 타임리프에서 문자와 표현식등은 분리되어 있기에 더해서 사용해야한다.
- 리터널 대체 문법을 사용해 편리하게 사용할수있다.
- 예) 같은 코드이다.
- th:onclick="'location.href=' + '\'' + @{/basic/items/add} + '\''"
- th:onclick="|location.href='@{/basic/items/add}'|"
반복 출력 - "th:each"
- 예 )
<tr th:each= "item : $(items)">- 반복은 th:each를 사용한다 이렇게하면, 모델에 포함된 items 컬렉션 데이터가 item 변수에 하나씩 포함되고 반복문 안에서 item 변수를 사용할수 있다.
속성 변경 - "th:action"
- HTML 폼에서 action 값이 없으면 현재 URL에 데이터를 전송한다.
- GET/POST 메서드 방식으로 두 기능을 구분한다
${변수명}
- 모델에 포함된 값이나, 타임리프의 변수로 선언된 값을 바로 조회할수있다.
- 프로퍼티 접근법을 사용 (item.getId --> item.id)
- 예 )
<td th:text="${item.price}">10000</td>
- 10000대신 item.price값이 들어간다.
- th:text는 내용변경, th:text의 값으로 변경된다.
