[Spring Boot & Thymeleaf] 10. 반복

Kloong 2022. 10. 24. 18:08

참고

Spring Boot & Thymeleaf 시리즈는 김영한 님의 "스프링 MVC 2편 - 백엔드 웹 개발 활용 기술" 강의를 정리한 글입니다. 글에 첨부된 사진은 해당 강의의 강의 자료에서 캡쳐한 것입니다. 제 Github에만 올려뒀다가, 정보 공유와 강의 홍보(?)를 위해 블로그에도 업로드합니다.

스프링 MVC 2편 - 백엔드 웹 개발 활용 기술 - 인프런 | 강의

웹 애플리케이션 개발에 필요한 모든 웹 기술을 기초부터 이해하고, 완성할 수 있습니다. MVC 2편에서는 MVC 1편의 핵심 원리와 구조 위에 실무 웹 개발에 필요한 모든 활용 기술들을 학습할 수 있

www.inflearn.com

마크다운 형식으로 작성한 글을 블로그에 다시 올리는 거라 가독성이 많이 떨어집니다. 조금더 편하게 보시려면 아래의 Github repository에서 보시면 됩니다.

GitHub - Kloong1/TIL: Today I Learned.

Today I Learned. Contribute to Kloong1/TIL development by creating an account on GitHub.

github.com

타임리프 - 반복

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

BasicController.java 내용 추가

package kloong.thymeleaf.basic;

import ... //생략

@Controller
@RequestMapping("/basic")
public class 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>  
    <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>userStat</th>  
    </tr>  
    <tr th:each="user, userStat : ${users}">  
        <td th:text="${userStat.count}">count</td>  
        <td th:text="${user.username}">username</td>  
        <td th:text="${user.age}">age</td>  
        <td>  
            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>

반복 기능 - `th:each`

<tr th:each="user : ${users}">
반복시 : 의 오른쪽에 위치한 컬렉션(위 HTML에서는 ${users})의 값을 하나씩 꺼내서, : 의 왼쪽에 위치한 변수(위 HTML에서는 user)에 담아 th:each 가 있는 태그를 반복하여 생성/실행한다.
th:each 는 List 뿐만 아니라 배열, java.util.Iterable , java.util.Enumeration 을 구현한 모든 객체에 적용 가능하다.
Map 도 사용할 수 있는데, 이 경우 변수에 담기는 값은 Map.Entry 이다.

반복 상태 정보

<tr th:each="user, userStat : ${users}">
반복의 두 번째 파라미터를 설정해서 loop의 상태를 확인 할 수 있다.
두번째 파라미터는 생략 가능한데, 생략하면 지정한 변수명 + Stat 이 된다.
여기서는 두 번째 파라미터 이름이 user + Stat = userStat 이므로, 해당 파라미터의 선언을 하지 않아도 정상적으로 동작한다.

반복 상태 기본 변수

index : 0부터 시작하는 값
count : 1부터 시작하는 값
size : 전체 사이즈
even , odd : 홀수, 짝수 여부( boolean )
first , last :처음, 마지막 여부( boolean )
current : 현재 객체

저작자표시 비영리 (새창열림)