티스토리 뷰

Skill/html js css

[Thymeleaf] th:each 반복문

진열사랑 2022. 10. 12. 10:29

출처: https://ifuwanna.tistory.com/200

[Thymeleaf] 반복문 처리, 상태변수 접근 (index)

 개요 타임리프(Thymeleaf) 템플릿에서는 for문 while 등과 유사한 반복(iteration) 처리를 위해 th:each 를 사용 합니다. 루프 처리 중 상태를 추적하는 데 유용한 메커니즘인 status 변수가 제공되어 ind

ifuwanna.tistory.com

타임리프(Thymeleaf) 템플릿에서는 for문 while 등과 유사한 반복(iteration) 처리를 위해 th:each 를 사용 합니다. 
루프 처리 중 상태를 추적하는 데 유용한 메커니즘인 status 변수가 제공되어 index, count 등을 쉽게 얻을 수도 있습니다.

다만 loop를 원천적으로 break를 하거나 반복처리를 하면서 어떤 값을 더해 다른 곳에서 사용하는 것이 불가하는 등 제약사항들이 있지만 우리는 Thymeleaf가  view Template engine이라는걸 명심해야 합니다! 

JSTL등 에서 처리하듯이 Business logic을 view에 녹이는 것은 지양 해야하며 이런 비즈니스로직이 들어가는 부분은 서버에서 처리한 뒤 view Template 에서는 완성된 데이터를 "보여주는 것" 에 집중하는게 바람직하겠습니다.

 th:each 


 반복 하려는 html 엘리먼트에 th:each 속성을 사용하여 콜렉션(Collection) 을 반복하며 화면을 처리 할 수 있습니다.
/* Entity Class */ public class Product{ private int seq; private String name; private int price; private int quantity; } /* Java Controller */ @RequestMapping(value = "/thymeleaf/iteration", method = { RequestMethod.POST, RequestMethod.GET }) public String Thymeleaf(Model model){ List<Product> productList = new ArrayList<>(); // constructor >> seq, name, price, quantity productList.add(new Product(1,"사과",1000,10)); productList.add(new Product(2,"배",2000,16)); productList.add(new Product(3,"초콜릿",1000,3)); productList.add(new Product(4,"치킨",15000,1)); //add data to view model.addAttribute("productList",productList); return "thymeleaf/iteration"; } <!-- html (Thymeleaf) --> <table class="tb_col"> <tr> <th>seq</th> <th>name</th> <th>price</th> <th>quantity</th> </tr> <tr th:each="product : ${productList}"> <td th:text="${product.seq}"></td> <td th:text="${product.name}"></td> <td th:text="${product.price}"></td> <td th:text="${product.quantity}"></td> </tr> </table>
▼▼▼▼▼ 결과(HTML)▼▼▼▼▼
<table class="tb_col"> <tr> <th>seq</th> <th>name</th> <th>price</th> <th>quantity</th> </tr> <tr> <td>1</td> <td>사과</td> <td>1000</td> <td>10</td> </tr> <tr> <td>2</td> <td>배</td> <td>2000</td> <td>16</td> </tr> <tr> <td>3</td> <td>초콜릿</td> <td>1000</td> <td>3</td> </tr> <tr> <td>4</td> <td>치킨</td> <td>15000</td> <td>1</td> </tr> </table>



'Skill > html js css' 카테고리의 다른 글

[CSS] 웹페이지 프린팅  (0) 2022.10.14
css !important  (0) 2022.10.12
[Tymeleaf] javascript inlining  (0) 2022.10.12
웹메일 css  (0) 2022.10.11
javascript reduce()  (0) 2022.10.11
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2024/11   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
글 보관함