타임리프 글을 리뉴얼 했습니다.
아래 내용들이 당연히 포함되어있고 더 자세한 설명과 예시가 있습니다~
바로 아래링크 누르셔서 보시면 됩니다!
2021.07.26 - [Web/MVC2] - EP1. 타임리프 Thymeleaf
EP1. 타임리프 Thymeleaf
toc링크기능이 추가가 안되어있어서 필요한 부분은 Ctrl+F 로 찾아서 보시면 됩니다~ 목차 타임리프 사용 선언 텍스트 - text, utext - Escape HTML 엔티티 springEL 표현식 지역변수 선언 기본 객체들 - 편의
ksabs.tistory.com
타임리프 사용선언
<html xmlns:th="http://www.thymeleaf.org">
속성변경
대부분의 HTML 속성을 th:xxx 로 변경할 수 있다.
변수 표현식
<td th:text="${item.price}">10000</td>
모델에 포함된 값이나, 타임리프 변수로 선언한 값을 조회할 수 있다.
프로퍼티 접근법을 사용한다. (item.getPrice())
URL 링크 표현식
th:href="@{/css/bootstrap.min.css}"
원래의 href 에 있던 값을 th:href 로 치환한다.
링크를 적을때는 @{}
URL 링크 표현식 2
th:href="@{/basic/items/{itemId}(itemId=${item.id})}"
경로에 {변수}를 넣고 바로 괄호()안에서 (변수=${값}) 을 해주면 th 변수를 사용하여 url를 표현할 수 있다.
또한,
th:href="@{/basic/items/{itemId}(itemId=${item.id}, query='test')}" 이렇게 괄호 안에서 ,로 구분하고 변수를 더 추가해주면 쿼리파라미터를 생성한다.
리터럴 대체
th:onclick="|location.href='@{/basic/items/add}'|"
|...| : java의 문자처리와 마찬가지로 +로 이어줘야 하는 것을 대신해서 | | 사이에 있으면 전부 문자열로 처리한다.
반복 출력
<tr th:each="item : ${items}">
모델에 포함된 items 컬렉션 데이터가 item 변수에 하나씩 포함되고, 반복문 안에서 item 변수를 사용할 수 있다.
단순반복
컬렉션을 반복하는 것이 아닌 단순하게 숫자만큼 태그를 반복해야할 때가 있다.
th:each="num : ${#numbers.sequence(1,5)}"
또한, 데이터의 개수만큼 반복시켜야할 때도 있다.
th:each="num : ${#numbers.sequence(0, lecture.getAverageRating()-1)}"
이럴땐 0부터 (받아온데이터)-1 만큼 반복시키면 잘 동작한다.
반복상태변수 사용하기
타임리프에서 th:each를 사용하면 반복상태를 추적할 수 있는 status 변수를 제공해줍니다.
- index 현재 반복 인덱스 (0부터 시작)
- count 현재 반복 인덱스 (1부터 시작)
- current 현재 요소
- even 현재 반복이 짝수인지 여부 (boolean)
- odd 현재 반복이 홀수인지 여부 (boolean)
- first 현재 반복이 첫번째인지 여부 (boolean)
- last 현재 반복이 마지막인지 여부 (boolean)
타임리프에서 제공하는 status변수에 접근하는 방법은 2가지 입니다.
1. 반복대상 오브젝트명 + Stat
<div th:each="num : ${#numbers.sequence(1,3)}">
<p th:text="${'index : ' + numStat.index}"></p>
<p th:text="${'count : ' + numStat.count}"></p>
<p th:text="${'size : ' + numStat.size}"></p>
<p th:text="${'current : ' + numStat.current}"></p>
<p th:text="${'even : ' + numStat.even}"></p>
<p th:text="${'odd : ' + numStat.odd}"></p>
<p th:text="${'first : ' + numStat.first}"></p>
<p th:text="${'last : ' + numStat.last}"></p>
</div>
2. 직접 명명하여 사용
<div th:each="num, index : ${#numbers.sequence(1,3)}">
<p th:text="${'index : ' + index.index}"></p>
<p th:text="${'count : ' + index.count}"></p>
<p th:text="${'size : ' + index.size}"></p>
<p th:text="${'current : ' + index.current}"></p>
<p th:text="${'even : ' + index.even}"></p>
<p th:text="${'odd : ' + index.odd}"></p>
<p th:text="${'first : ' + index.first}"></p>
<p th:text="${'last : ' + index.last}"></p>
</div>직접 명명하여 사용하는 경우에는 오브젝트명+Stat으로는 사용할 수 없고 에러가 발생합니다.
주의 & 꿀팁
index는 0부터 시작후 9까지 도달하면 그 다음은 다시 0이 됩니다.
그래서 10 이상의 상태변수도 얻기 위해서는 current를 사용해야합니다.
만약 1이 아닌 0부터 시작하고 10 이상의 상태변수를 얻기 위해서는 current-1을 이용하면 됩니다. (페이징 처리시 사용하기 좋음)
<li class="page-item" th:each="num, index : ${#numbers.sequence(page.getStartPage(), page.getEndPage())}">
<a th:href="@{/?page={page}(page = ${index.current-1})}" th:text="${num}" class="page-link" href="">1</a></li>
내용변경
<td th:text="${item.price}">10000</td>
내용의 값(10000)을 th:text="값" 값으로 변경한다.
javascript에서 타임리프 문법 사용하기
타임리프로 반복문을 돌리던 중 나온 데이터를 사용할때 좋다.
방법 1.
[[ {타임리프문법} ]]
<label th:onclick="getUserId([[${userId}]],[[${email}]] );" for="radio-11" data-toggle="tooltip" data-placement="bottom" data-trigger="hover" class="pm-tab1-pad">
방법 2.
th:data-{파라미터이름} 에 타임리프변수 지정하고
this.getAttribute('data-{파라미터이름}') 으로 사용하기
<label th:data-parameter1="${userId}" th:data-parameter2="${email}" th:onclick="getUserId(this.getAttribute('data-parameter1'),this.getAttribute('data-parameter2'));" for="radio-11" data-toggle="tooltip" data-placement="bottom" data-trigger="hover" class="pm-tab1-pad">
null check 하기
만약 view 단에서 보여줘야 하는 데이터가 없으면 프론트단에서는 해당 데이터를 보여주는 태그를 없애주어야 합니다.
그렇지 않으면 에러가 발생할 수 있습니다.
타임리프에서는 null check를 간단하게 할 수 있습니다.
isEmpty()를 사용하면 들어온 값이 null이거나 빈 문자열일 때 true를 반환합니다.
<div th:if="${not #strings.isEmpty(examData)}"> ... </div>
'Web > MVC' 카테고리의 다른 글
| [Servlet 구현하기] 어노테이션 기반 MVC 프레임워크 구현 (5) | 2022.09.19 |
|---|---|
| EP9. PRG (Post/Redirect/Get) 패턴 (0) | 2021.04.01 |
| EP7. HTTP 응답 데이터 처리 (0) | 2021.03.30 |
| EP6. HTTP 요청 데이터 처리 (0) | 2021.03.29 |
| EP5. Spring MVC 기본 기능 (요청 매핑) (0) | 2021.03.25 |