spring thymeleaf

Thymeleaf Collection 정보 화면에 렌더링하기

By andrew

Thymleaf를 통한 Item 목록을 화면에 렌더링 하는 방법에 대해서 알아보자.
thymleaf는 template view 엔진으로써 Spring MVC에서 모델에 담은 데이터 정보를 View단에 렌더링(뿌리는) 역할을 한다.

1. Item 클래스 정의

@Data
@AllArgsConstructor
public class Item {

    private String name;
    private int price;

}

2. Mvc Controller 작성

REST API를 작성하는 컨트롤러와 다른 점은 @Controller 와 메서드 선언부에 @ResponseBody 가 없다. 이런 경우에 스프링에서는 ViewNameResolver 라는 놈이 return하는 item_list를 item_list.html 파일로 매핑해서 해당 화면에 대한 정보를 렌더링한다. 렌더링할 때 model정보에 items 라는 이름으로 해당 목록정보를 담았다.

@Controller
public class ItemController {

    private static List<Item> ITEMS = Arrays.asList(
            new Item("Chair", 30),
            new Item("Lug", 20),
            new Item("Desk", 50)
        );

    @GetMapping("/item")
    public String findItem(Model model) {
        model.addAttribute("items", ITEMS);
        return "item_list";
    }

}

3. item_list.html 작성

해당 파일은 src/main/resources/templates/ 디렉토리 하위에 item_list.html파일을 위치시켜야 합니다. 물론 이 path정보를 변경할 수 있지만, 기본 default path가 SpringBoot를 통해서 이루어 지므로 딱히 수정할 것은 없습니다.

<!DOCTYPE html>
<!-- 반드시 네임태그를 달아줍니다. -->
<html xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="UTF-8" />
    <title>Item List</title>
  </head>
  <body>
    <h1>Item List</h1>
    <table>
      <thead>
        <th>아이템</th>
        <th>가격</th>
      </thead>
      <tbody>
        <tr th:each="item:${items}">
          <td th:text="${item.name}"></td>
          <td th:text="${item.price}"></td>
        </tr>
      </tbody>
    </table>
  </body>
</html>
  • thymleaf 네임태그 달기
  • th:each 구문 사용: 컨트롤러에서 넘긴 첫번째 파라미터 model.addAttribute("items", xxx) items가 바로 ${items}이 부분에 들어오게 됩니다.

4. 4.결과확인

프로젝트를 실행하고 localhost:8080/item를 호출하면 Model에 담은 데이터 정보가 화면에 제대로 뿌려진다.

5. 정리s

오늘은 간단한 thymleaf를 통한 아이템을 화면에 뿌리는 방법에 대해서 알아보았습니다. 이 외에도 자주 사용하는 thymeleaf 태그(?)들과 html내 파일에서 자바스크립트를 활용한 이벤트들을 다루는 방법은 추후에 포스팅 하도록 하겠습니다.