[Thymeleaf] 반복

웹 화면에서 리스트 데이터를 출력해야 할 때가 많다. 예를 들어 사용자 목록, 게시글 목록, 주문 내역 같은 것들이 있다. 이런 경우에 개발자가 직접 반복문을 작성하는 대신, Thymeleaf는 th:each라는 속성을 제공해서 템플릿 안에서 간단히 반복 처리를 할 수 있도록 도와준다.

 

이제 실제 예시를 통해 어떻게 사용하는지 하나씩 알아보자.

 

 

1. 컨트롤러에서 데이터 준비하기

컨트롤러에서 사용자 리스트를 만들어서 모델에 담는다.

@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);
}

 

2. 뷰 템플릿에서 반복 출력하기

기본 반복

<tr th:each="user : ${users}">
    <td th:text="${user.username}">username</td>
    <td th:text="${user.age}">0</td>
</tr>

→ users 리스트의 각 요소를 꺼내서 user에 담고, 그 안의 username, age 값을 출력한다.

 

 

반복 상태 유지

반복문을 사용할 때는 단순히 데이터를 출력하는 것 외에도, 현재 반복 상태를 확인할 수 있는 유틸이 함께 제공된다.

<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}">0</td>
    <td>
        index = <span th:text="${userStat.index}"></span><br/>
        count = <span th:text="${userStat.count}"></span><br/>
        size = <span th:text="${userStat.size}"></span><br/>
        even? = <span th:text="${userStat.even}"></span><br/>
        odd? = <span th:text="${userStat.odd}"></span><br/>
        first? = <span th:text="${userStat.first}"></span><br/>
        last? = <span th:text="${userStat.last}"></span><br/>
        current = <span th:text="${userStat.current}"></span>
    </td>
</tr>

여기서 userStat은 반복 상태를 담고 있는 객체다. 생략하면 기본적으로 변수명 + "Stat" 이름이 붙는다.

 

3. 실행 결과

실행하면 테이블이 다음과 같이 출력된다.

즉, 반복 상태 값들을 이용해서 행 번호, 전체 크기, 짝수/홀수 여부, 첫 행/마지막 행 여부 등을 쉽게 알 수 있다.

 

4. 반복 상태 값 정리

Thymeleaf의 th:each는 단순히 리스트를 반복하는 것만 있는 게 아니다. 반복하면서 지금 몇 번째인지, 처음인지 마지막인지, 짝수인지 홀수인지 같은 상태 값도 함께 제공해 준다. 이걸 잘 쓰면 화면을 훨씬 유연하게 꾸밀 수 있다.

• index : 0부터 시작하는 번호. 프로그래머들이 흔히 쓰는 배열 인덱스랑 똑같다.
• count : 1부터 시작하는 번호. 사람 눈에 보여줄 땐 보통 이게 더 직관적이다.
• size : 전체 데이터 크기. “전체 3명 중 2번째 사용자” 이런 식으로 표시할 때 유용하다.
• even / odd : 짝수, 홀수 여부를 알려준다. 테이블 행마다 배경색을 번갈아 줄 때 딱 맞는다.
• first / last : 첫 번째인지, 마지막인지 알려준다. 예를 들어 첫 행에는 강조 문구, 마지막 행에는 합계 같은 걸 넣을 수 있다.
• current : 현재 객체 자체. 사실상 user랑 똑같다.

 

마무리하며:

Thymeleaf의 th:each는 단순히 데이터를 반복해서 보여주는 데 그치지 않는다. 반복 상태를 함께 제공하기 때문에, 화면을 더 풍부하게 제어할 수 있도록 도와준다. 예를 들어 짝수/홀수 행에 다른 색을 입히거나, 마지막 행에만 합계를 표시하거나, 첫 번째 데이터만 강조하는 등의 처리를 쉽게 구현할 수 있다.

 

결국 타임리프는 단순한 템플릿 엔진을 넘어, 웹 화면을 개발할 때 자주 필요한 기능들을 직접 제공해주는 도구다.

 

 

감사합니다.