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내 파일에서 자바스크립트를 활용한 이벤트들을 다루는 방법은 추후에 포스팅 하도록 하겠습니다.
📚 Related Posts
- Spring WebFlux 테스트 방법
- Spring과 MongoDB 연동 실전 가이드
- SpringBoot, MongoDB 시작하기
- Spring Boot 서버 타임존 설정 방법
- SpringBoot CommandLineRunner, ApplicationRunner 초기화 방법
- Jackson, LocalDateTime Serialization, Deserialization 이슈
- Spring Boot, Dockerfile로 이미지 생성, 배포하기
- SpringBoot RabbitMQ 연동하기
- Junit5 정리
- Spring Sentry(에러 트래킹 서비스) 적용하기
- [Spring] 빈 주입하는 방법 && Best Practice
- Thymeleaf 실무에서 자주 사용하는 것들
- Thymeleaf Collection 정보 화면에 렌더링하기
- Spring, JPA를 이용한 REST API 만들기
- [Spring] MultipartFile을 이용한 파일 업로드
- [Spring] 모델 검증(validation)
- [Spring]HandlerMethodArgumentResolver 인터페이스
- [Spring] DispatcherServlet에 대해서 알아보자
- [Spring] MVC 만들어 보기
- [Spring] 메세지 컨버터
- [Spring] MVC 살펴보기
- [Spring] @ConfigurationProperties를 이용해서 properties값들을 클래스로 관리하기
- [Spring] Profile 설정하기
- [Spring] SpringApplication를 통한 코딩
- [Spring Boot] 스프링 부트 3가지 특징
- [Spring] @SpringBootAppllication 어노테이션에 대한 고찰
- [Spring] bean circular dependencies (빈 순환 참조)
- [Spring]Bean에 대해서 알아보자
- SpringBoot, JPA, H2를 이용한 간단한API 작성
- [Spring] Spring Data Common 프로젝트 살펴보기