[Thymeleaf] 반복 - th:each

·2023년 11월 22일

Thymeleaf

목록 보기
4/4
post-thumbnail

💡반복 - th:each

  • 타임리프에서 반복은 th:each를 사용한다.
  • 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); 
}

each.html

<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>etc</th> 
  </tr>
  <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>
      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>

📗반복 기능

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

  • 반복 시 오른쪽 컬렉션 ${users}의 값을 하나씩 꺼내 왼쪽 변수 user에 담아서 태그를 반복 실행한다
  • th:eachList, 배열, java.util.Iterable, java.util.Enumeration을 구현한 모든 객체를 반복에 사용할 수 있다.
  • Map에 사용시, 변수에 담기는 값은 Map.Entry

📗반복 상태 유지

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

  • 두번째 파라미터 설정해서 반복의 상태를 확인할 수 있다.
  • 두번째 파라미터 생략 가능 -> 생략 시 지정한 변수명(user)+Stat가 됨.

반복 상태 확인 가능 값

  • index : 0부터 시작하는 값
  • count : 1부터 시작하는 값
  • size : 전체 사이즈
  • even,odd : 홀수, 짝수 여부(boolean)
  • first,last : 처음, 마지막 여부(boolean)
  • current : 현재 객체
profile
배우고 기록하며 성장하는 백엔드 개발자입니다!

0개의 댓글