[Thymeleaf] Iteration (반복)

타임리프에서 th:each를 사용하면 반복문을 사용할 수 있다

또한 반복에서 사용할 수 있는 여러 상태 값을 함께 지원한다

 

Thymeleaf Iteration

마치 자바의 for each 문을 사용하듯 아래와 같이 작성하게 되면 반복문을 돌며 동적 HTML이 생성된다

//서버측 데이터
(생략)
List<UserDTO> list = new Arraylist<>();
list.add(new UserDTO("userA", 10)); // (username, age)
list.add(new UserDTO("userB", 20));
list.add(new UserDTO("userC", 30));

model.addAttribute("userList, list");
(생략)


//Thymeleaf
(생략)
<table border="1">
	<tr>
    	<th>username</th>
        <th>age</th>
    </tr>
    <tr th:each="user : ${userList}">
    	<td th:text="${user.username}">username</td>
        <td th:text="${user.age}">age</td>
    </tr>
</table>
(생략)

타임리프의 반복문은 List 뿐만 아니라 단순 객체, Map에서도 사용이 가능하다

 

Keeping Iteration Status (반복 상태 유지)

위의 예시에서 아래와 같이 하단에 추가 하게 되면 반복 상태 유지에 대한 값들이 나온다

<tr th:each="user, userStat : ${usersList}">
	<td th:text="${userStat.count}">usercount</td>
    <td th:text="${user.username}">username</td>
	<td th:text="${user.age}">age</td>
	<td>
		<span th:text="${userStat.index}"></span>
		<span th:text="${userStat.count}"></span>
		<span th:text="${userStat.size}"></span>
		<span th:text="${userStat.even}"></span>
		<span th:text="${userStat.odd}"></span>
		<span th:text="${userStat.first}"></span>
		<span th:text="${userStat.last}"></span>
		<span th:text="${userStat.current}"></span>
	</td> 
</tr>

반복의 두번째 파라미터를 설정하여 반복의 상태를 확인할 수 있다 (userStat)

이는 생략이 가능한데 생략하게 되면 지정한 변수명 (user) + Stat으로 사용이 가능하다

 

반복 상태 유지의 기능은 아래와 같다

• index : 0부터 시작하는 값

• count : 1부터 시작하는 값

• size : 전체 사이즈

• even , odd : 홀수 , 짝수 여부 (결과는 boolean)

• first , last : 처음 , 마지막 여부 (결과는 boolean)

• current : 현재 객체

 

---

개인 학습을 위해 작성되는 글입니다.

제가 잘못 알고 있는 점에 대한 지적 / 더 나은 방향에 대한 댓글을 환영합니다.

 

참조 링크:

https://www.inflearn.com/course/%EC%8A%A4%ED%94%84%EB%A7%81-mvc-2/dashboard

https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html