[Thymeleaf] 타임리프 #3 - 반복

타임리프는 기본적으로 HTML 태그 안에  th:  로 시작하는 속성을 지정하여 사용한다.

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

<!-- <ul> 가 nameList 객체의 size만큼 생성됨. -->
<ul th:each="name : ${nameList}" >
  ...
</ul>

 

 

🎈반복문 사용 예시

• Controller

@Controller
public class ThymeleafController {
    @GetMapping
    public String form(Model model) {
    	List<String> nameList = new ArrayList<>();
    	nameList.add("Bob");
        nameList.add("Rachel");
        nameList.add("Kai");
        
        model.addAttribute("nameList", nameList);
        return "new-form";
    }
}

 

• View

<!-- <ul> 가 nameList 객체의 size만큼 생성됨. -->
<ul th:each="name : ${nameList}">
  <li th:text=${name}></li>
</ul>

<!-- ↓↓↓↓↓↓ 실제 렌더링된 HTML -->
<ul>
  <li>Bob</li>
</ul>
<ul>
  <li>Rachel</li>
</ul>
<ul>
  <li>Kai</li>
</ul>

• <ul th:each="name : ${nameList}">
  • nameList 객체에서 값을 하나씩 꺼내 name에 넣는다. 
  • ':'  문자를 기준으로 왼쪽엔 변수명, 오른쪽엔 컬렉션 객체를 선언하면 된다.
• th:each 는 List 뿐만 아니라 배열, java.util.Iterable , java.util.Enumeration 을 구현한 모든 객체를 반복에 사용할 수 있다.
  • Map 사용시 Map.Entry 객체가 변수에 담기게 된다. 

 

 

🎈반복문 Stat 사용 예시

타임리프에서는 th:each 사용시 유용한 객체를 추가로 제공한다.

기본적으로 반복문에서 선언한 변수명 + 'Stat' 이름으로 반복의 상태를 지닌 객체가 자동으로 생성된다. 이 객체를 사용하여 반복문의 상태를 나타낼 수 있다. 반복문의 두번째 파라미터를 별도로 설정하면 해당 변수명으로 바뀐다. 

 

<!-- name + 'Stat' 객체가 자동으로 생성된다. -->
<ul th:each="name : ${nameList}">
  <li th:text=${name}></li>
  <p th:text=${nameStat.count}></p>
</ul>

<!-- ↓↓↓↓↓↓ 실제 렌더링된 HTML -->
<ul>
  <li>Bob</li>
  <p>1</p>
</ul>
<ul>
  <li>Rachel</li>
  <p>2</p>
</ul>
<ul>
  <li>Kai</li>
  <p>3</p>
</ul>

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

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

• https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#data-conversion-formatting

Tutorial: Using Thymeleaf