Thymeleaf (9) 반복

[개발] - Spring/Thymeleaf

Thymeleaf (9) 반복

완벽한 장면 2023. 11. 15. 16:24

반복

- 타임리프에서 반복은 th:each 를 사용한다. 추가로 반복에서 사용할 수 있는 여러 상태 값을 지원한다.

BasicController 추가

@GetMapping("/each")
public String each(Model model) {
    addUsers(model);
    return "basic/each";
}
private void addUsers(Model model) {
    List<User> list = new ArrayList<>();
    list.add(new User("userA", 10));
    list.add(new User("userB", 20));
    list.add(new User("userC", 30));
    model.addAttribute("users", list);
}

/resources/templates/basic/each.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>기본 테이블</h1>
<!-- 기본 테이블 생성 -->
<table border="1">
    <tr>
        <th>username</th>
        <th>age</th>
    </tr>
    <!-- Thymeleaf의 th:each를 사용하여 사용자 목록(users)을 반복하며 각 사용자 정보 표시 -->
    <tr th:each="user : ${users}">
        <td th:text="${user.username}">username</td>
        <td th:text="${user.age}">0</td>
    </tr>
</table>

<h1>반복 상태 유지</h1>

<!-- 반복 상태 유지하는 테이블 생성 -->
<table border="1">
    <tr>
        <th>count</th>
        <th>username</th>
        <th>age</th>
        <th>etc</th>
    </tr>
    <!-- Thymeleaf의 th:each를 사용하여 사용자 목록(users)을 반복하며 각 사용자 정보 표시 -->
    <!-- 사용자 목록(users)을 반복하면서 반복 상태(userStat)도 함께 사용 -->
    <tr th:each="user, userStat : ${users}">
        <!-- 현재 사용자 정보 출력 -->
        <td th:text="${userStat.count}">username</td>
        <td th:text="${user.username}">username</td>
        <td th:text="${user.age}">0</td>
        <td>
            <!-- 사용자 목록(users)을 반복하면서 생성되는 반복 상태(userStat) 정보 출력 -->
            index = <span th:text="${userStat.index}"></span>
            count = <span th:text="${userStat.count}"></span>
            size = <span th:text="${userStat.size}"></span>
            even? = <span th:text="${userStat.even}"></span>
            odd? = <span th:text="${userStat.odd}"></span>
            first? = <span th:text="${userStat.first}"></span>
            last? = <span th:text="${userStat.last}"></span>
            current = <span th:text="${userStat.current}"></span>
        </td>
    </tr>
</table>

</body>
</html>

부연설명

- 표를 생성하고 반복적으로 사용자 데이터를 표시하는 예제

1. 기본 테이블

<table> 요소를 사용하여 테이블을 생성하고, <tr> 요소를 사용하여 테이블 행을 정의.
th:each 속성을 사용하여 ${users} 변수의 각 사용자에 대해 반복하고,
${user.username} 및 ${user.age}를 사용하여 사용자 이름과 나이를 표시한다.

2. 반복 상태 유지

두 번째 테이블은 반복 상태 정보를 함께 출력한다.
th:each="user, userStat : ${users}"를 사용하여 사용자 목록을 반복하면서 userStat 변수에 반복 상태 정보를 저장.
반복 상태 정보는 index, count, size, even, odd, first, last, current 등 다양한 속성으로 사용자 정의할 수 있으며,
이 정보를 출력하여 반복 상태를 확인할 수 있다.

반복 기능

<tr th:each="user : ${users}">

반복 상태 유지

반복 상태 유지 기능

if, unless

switch

실행하면

728x90