[Thymeleaf] th:each로 반복하기

SCY·2023년 2월 26일
0

Thymeleaf에도 반복의 역할을 하는 문법이 있다.
그것은 바로 th:each !!!

여러 행의 테이블을 작성하고 싶은데 어떤 문법을 사용해야 할지 검색하다 발견하게 되었다. 먼저 테이블을 생성하는 html 문법부터 살펴보자.

html로 테이블 생성하기

<tr> 요소는 테이블의 각 행(row)을 정의하고, <th> 요소는 각 열의 제목을 정의한다. <td> 요소는 하나의 테이블 셀(cell)을 정의한다.

<table>
  <tr>
    <th>헤더1</th>
    <th>헤더2</th>
  </tr>
  <tr>
    <td>첫째칸</td>
    <td>둘째칸</td>
  </tr>
  <tr>
    <td>첫째칸</td>
    <td>둘째칸</td>
  </tr>
</table>

위 코드로 생성되는 테이블이다. 여기서 나는 <tr></tr> 부분을 반복하고 싶었다. 그럼 이제 th:each 문법을 알아보자.

th:each 사용방법

기본적인 사용 방법 :

th:each = "board : ${boardList}"

boardList의 값들을 board가 하나하나 참조한다.
비슷한 형태로 파이썬의 for data in datas가 생각난다.

<tr th:each="board:${boardList}">
  <td th:text="${board.title}"></td>
  <td th:text="${board.writer}"></td>
  <td th:text="${board.date}"></td>
</tr>

Html에 위와 같이 작성해주고 Controller에는 아래와 같이 작성해 boardList에 모든 Board를 리스트의 형태로 전달해주었다.

List<Board> boardList = br.findAll();
model.addAttribute("boardList", boardList);

여기서 옵션(status)을 추가하려면 아래와 같이 작성한다.

th:each = "board, stat : ${boardList}"

status 변수가 제공해주는 값은 아래와 같다.

제목내용
index현재 반복의 인덱스 (0부터 시작)
count현재 반복의 인덱스 (1부터 시작)
size전체 사이즈
current현재 요소
even/odd현재 반복이 짝수/홀수인지 여부
first/last현재 반복이 첫번째/마지막인지 여부
<tr th:each="board, stat : ${boardList}">
  <td th:text="${stat.count}"></td>
  <td th:text="${board.title}"></td>
  <td th:text="${board.writer}"></td>
  <td th:text="${board.date}"></td>
</tr>

위와 같이 작성해주면 stat.count 자리가 1부터 차례대로 채워지겠죠?

굿.

profile
성장 중독 | 서버, 데이터, 정보 보안을 공부합니다.

0개의 댓글