Spring MVC - 타임리프(Thymeleaf) 반복 기능(th:each), 조건부 기능(th:if, th:unless, th:switch)

 

 

 

타임리프(Thymeleaf) 반복 기능

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

 

 

반복 기능

 

• th:each="변수 : 컬렉션"
• List, 배열, Iterable, Enumeration을 구현한 모든 객체를 반복에 사용 가능
• Map의 경우는 Map.Entry가 변수에 담긴다.

 

User 객체가 3개 저장된 List 컬렉션의 반복

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

 서버를 가동시켜 웹브라우저에서 HTML의 소스 코드를 보면 다음과 같다.

<tr>
    <td>userA</td>
    <td>10</td>
</tr>
<tr>
    <td>userB</td>
    <td>20</td>
</tr>
<tr>
    <td>userC</td>
    <td>30</td>
</tr>

---

반복 사용되는 여러 상태 값

 

• th:each="변수, 상태변수 : 컬렉션"
  
• 자바의 for-each와 비슷하다
• 두 번째 파라미터를 설정하여 반복의 상태를 확인할 수 있다.
• 반복 상태를 나타내 주는 상태변수는 생략이 가능하며 자동으로 [ 변수명 + Stat ] 명칭을 부여받는다.

 

상태	설명	예시
index	0 부터 시작하는 값	th:text="${userStat.index}
count	1부터 시작하는 값	th:text="${userStat.count}
size	전체 사이즈	th:text="${userStat.size}
even, odd	홀수, 짝수 여부(boolean)	th:text="${userStat.even} th:text="${userStat.odd}
first, last	처음, 마지막 여부(boolean)	h:text="${userStat.first} th:text="${userStat.last}
current	현재 객체	th:text="${userStat.current}

 

User 객체가 3개 저장된 List 컬렉션의 반복

<tr th:each="user, userStat : ${users}">
    <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>

 서버를 가동시켜 웹브라우저에서 HTML의 소스 코드를 보면 다음과 같다.

<tr>
    <td>
        index = <span>0</span>
        count = <span>1</span>
        size = <span>3</span>
        even? = <span>false</span>
        odd? = <span>true</span>
        first? = <span>true</span>
        last? = <span>false</span>
        current = <span>BasicController.User(username=userA, age=10)</span>
    </td>
<!-- 다음 반복은 코드가 길어지므로 생략 -->
	...
</tr>

---

반응형

 

타임리프(Thymeleaf) 조건부 기능

 

if, unless

 

• 해당 조건이 맞지 않으면 태그 자체를 렌더링하지 않는다.
• if : 조건이 참일 경우 렌더링
• unless : 조건이 거짓일 경우 렌더링

 

user.age = 10

<span th:text="'미성년자'" th:if="${user.age lt 20}"></span>
<span th:text="'미성년자'" th:unless="${user.age ge 20}"></span>

 서버를 가동시켜 웹브라우저에서 HTML의 소스 코드를 보면 다음과 같다.

<span>미성년자</span>
<span>미성년자</span>

 user.age가 10이므로 user.age lt(<) 20은 참, user.age ge(>=) 20은 거짓이므로 둘 다 렌더링되었다.

---

 

switch

 

• 조건에 맞는 case를 렌더링
• 만족하는 조건이 없을 때  *  이 렌더링 된다.

 

user.age = 10

<td th:switch="${user.age}">
  <span th:case="10">10살</span>
  <span th:case="20">20살</span>
  <span th:case="*">기타</span>
</td>

 서버를 가동시켜 웹브라우저에서 HTML의 소스 코드를 보면 다음과 같다.

<td>
  <span>10살</span>
      
      
</td>