상품 목록 폼을 타임리프로 만들기
Controller
package hello.itemservice.web.basic;
import hello.itemservice.domain.item.Item;
import hello.itemservice.domain.item.ItemRepository;
import jakarta.annotation.PostConstruct;
import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import java.util.List;
@Controller
@RequestMapping("/basic/items")
@RequiredArgsConstructor
public class BasicItemController {
private final ItemRepository itemRepository;
@GetMapping
public String items(Model model) {
List<Item> items = itemRepository.findAll();
model.addAttribute("items", items);
return "basic/items";
}
// test
@PostConstruct
public void init() {
itemRepository.save(new Item("itemA", 10000, 10));
itemRepository.save(new Item("itemB", 20000, 20));
}
}
- itemRepository에서 모든 상품을 조회한 후 모델에 담는다. 그리고 뷰 템플릿 호출
- @RequiredArgsConstructor : final이 붙은 멤버 변수만 사용해서 자동으로 생성자를 만들어준다.
- 테스트용 데이터로 init 메서드 작성
- @PostConstruct : 해당 빈의 의존관계가 모두 주입되고 나면 초기화 용도로 호출된다.,
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<link th:href="@{/css/bootstrap.min.css}"
href="../css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div class="container" style="max-width: 600px">
<div class="py-5 text-center">
<h2>상품 목록</h2>
</div>
<div class="row">
<div class="col">
<button class="btn btn-primary float-end"
onclick="location.href='addForm.html'"
th:onclick="|location.href='@{/basic/items/add}'|"
type="button">상품 등록
</button>
</div>
</div>
<hr class="my-4">
<div>
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>상품명</th>
<th>가격</th>
<th>수량</th>
</tr>
</thead>
<tbody>
<tr th:each="item : ${items}">
<td><a href="item.html" th:href="@{/basic/items/{itemId}(itemId=${item.id})}"
th:text="${item.id}">회원id</a></td>
<td><a href="item.html" th:href="@{|/basic/items/${item.id}|}" th:text="${item.itemName}">상품명</a></td>
<td th:text="${item.price}">10000</td>
<td th:text="${item.quantity}">10</td>
</tr>
</tbody>
</table>
</div>
</div> <!-- /container -->
</body>
</html>
타임리프 간단한 기능 정리
타임리프 사용 선언
<html xmlns:th="http://www.thymeleaf.org">
속성 변경 - th:href
- th:href가 있으면, 타임리프 뷰 템플릿을 거치게 되면 원래 값을 th:xxx로 값을 변경한다. 만약 없다몬 값을 새로 생성한다.
- HTML을 그대로 볼 땐 href 속성이 사용되고, 뷰 템플릿을 거치면 th:href 가 href로 대체되며 동적으로 변경할 수 있다.
핵심
- th:xxx가 붙은 부분은 서버사이드에서 렌더링 되고, 기존것을 대체한다. 없다면 그대로 사용된다.
- HTML로 열었을 땐, th:xxx가 있어도, 브라우저는 th를 알지 못한다. 따라서 기존 템플릿도 유지할 수 있는 장점이 있다.
URL 링크 표현식
<link th:href="@{/css/bootstrap.min.css}"
타임리프는 URL 링크를 사용하는 경우 @{...}를 사용한다. 이것을 링크 표현식이라고 한다.
상품 등록 폼으로 이동
속성 변경 - th:onclick
onclick="location.href='addForm.html'"
th:onclick="|location.href='@{/basic/items/add}'|"
th:onclick에 리터럴 대체 문법이 사용되어있다. (|...|)
- 타임리프에서 문자와 표현식 등은 분리되어 있기 때문에 더해서 사용해야한다.
<span th:text="'Welcome to our application, ' + ${user.name} + '!'">`
- 리터럴 대체 문법을 사용하면 + 없이 편리하게 사용할 수 있다.
`<span th:text="|Welcome to our application, ${user.name}!|">`
반복 출력 - th:each
<tr th:each="item : ${items}">
<td><a href="item.html" th:href="@{/basic/items/{itemId}(itemId=${item.id})}"
th:text="${item.id}">회원id</a></td>
<td><a href="item.html" th:href="@{|/basic/items/${item.id}|}" th:text="${item.itemName}">상품명</a></td>
<td th:text="${item.price}">10000</td>
<td th:text="${item.quantity}">10</td>
</tr>
th:each를 사용해서 반복한다. 위 코드에선 model에 포함된 items 컬렉션 데이터가 item 변수에 하나씩 포함되고, 반복문 안에서 item 변수를 사용한 코드이다.
변수 표현식 -${...}
<td th:text="${item.price}">10000</td>
- 모델에 포함된 값이나, 타임리프 변수로 선언한 값을 조회할 수 있다.
- 프로퍼티 접근법을 사용한다 (item.getPrice)
내용 변경 - th:text
<td th:text="${item.price}">10000</td>
- 내용의 값을 th:text의 값으로 변경한다.
- 여기선 10000이 ${item.price}값으로 변경된다.
URL 링크표현식 2 - @{...}
th:href="@{/basic/items/{itemId}(itemId=${item.id})}"
- URL 링크표현식을 사용하면 경로를 템플릿처럼 편리하게 사용할 수 있다.
- 경로 변수{itemId}뿐만 아니라 쿼리 파라미터도 생성할수 있다.
(".../{itemId}(itemId=${item.id}, query='test')}")
URL 링크를 간단하게 만들기
th:href="@{|/basic/items/${item.id}|}"
리터럴 대체 문법을 사용해서 간단히 사용할 수 있다.
타임리프는 순수 HTML 파일을 웹 브라우저에서 열어도 내용을 확인할 수 있고, 서버를 통해 뷰 템플릿을 거치면 동적으로 변경된 결과를 확인할 수 있다. JSP를 생각해보면 웹 브라우저에서 확인할 수 없었다. 오직 서버를 통해서 JSP를 열었어야 했다. 그 차이가 있는것이다.
이렇게 순수 HTML을 유지하면서 뷰 템플릿도 사용할 수 있는 타임리프의 특징을 네츄럴 템플릿(natural templates)라고 한다.
상품 상세
@GetMapping("/{itemId}")
public String item(@PathVariable("itemId") Long itemId, Model model) {
Item item = itemRepository.findById(itemId);
model.addAttribute("item", item);
return "basic/item";
}
상품 상세조회 메서드 추가
로컬에서 공부하는 환경이라 gradle로 빌드되지 않아서 @PathVariable에 파라미터명을 직접 명시했다.
(Gradle 빌드하면 자연스럽게 해결됨)
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<link href="../css/bootstrap.min.css"
th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
<style>
.container {
max-width: 560px;
}
</style>
</head>
<body>
<div class="container">
<div class="py-5 text-center">
<h2>상품 상세</h2>
</div>
<div>
<label for="itemId">상품 ID</label>
<input type="text" id="itemId" name="itemId" class="form-control"
value="1" th:value="${item.id}" readonly>
</div>
<div>
<label for="itemName">상품명</label>
<input type="text" id="itemName" name="itemName" class="form-control"
value="상품A" th:value="${item.itemName}" readonly>
</div>
<div>
<label for="price">가격</label>
<input type="text" id="price" name="price" class="form-control"
value="10000" th:value="${item.price}" readonly>
</div>
<div>
<label for="quantity">수량</label>
<input type="text" id="quantity" name="quantity" class="form-control"
value="10" th:value="${item.quantity}" readonly>
</div>
<hr class="my-4">
<div class="row">
<div class="col">
<button class="w-100 btn btn-primary btn-lg"
onclick="location.href='editForm.html'"
th:onclick="|location.href='@{/basic/items/{itemId}/edit(itemId=${item.id})}'|"
type="button">상품 수정</button>
</div>
<div class="col">
<button class="w-100 btn btn-secondary btn-lg"
onclick="location.href='items.html'"
th:onclick="|location.href='@{/basic/items}'|"
type="button">목록으로</button>
</div>
</div>
</div> <!-- /container -->
</body>
</html>
속성 변경 -th:value
th:value="${item.id}"
- 모델에 있는 item 정보를 획득하고 프로퍼티 접근법으로 출력한다. (item.getId())
- value 속성을 th:value로 속성으로 변경한다.
(나머지 링크는 다른 코드와 같으므로 생략)
상품 등록 폼
@GetMapping("/add")
public String addForm() {
return "basic/addForm";
}
// 추가 될 상품 등록 메서드
@PostMapping("/add")
public String saveItem() {
return "basic/addForm";
}
상품 등록 폼을 추가했다. 등록하는 메서드가 아니라 상품 등록 폼을 조회하기 때문에 @GetMapping을 사용한다.
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<link href="../css/bootstrap.min.css"
th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
<style>
.container {
max-width: 560px;
}
</style>
</head>
<body>
<div class="container">
<div class="py-5 text-center">
<h2>상품 등록 폼</h2>
</div>
<h4 class="mb-3">상품 입력</h4>
<form action="item.html" th:action method="post">
<div>
<label for="itemName">상품명</label>
<input type="text" id="itemName" name="itemName" class="form-control"
placeholder="이름을 입력하세요">
</div>
<div>
<label for="price">가격</label>
<input type="text" id="price" name="price" class="form-control"
placeholder="가격을 입력하세요">
</div>
<div>
<label for="quantity">수량</label>
<input type="text" id="quantity" name="quantity" class="form-control"
placeholder="수량을 입력하세요">
</div>
<hr class="my-4">
<div class="row">
<div class="col">
<button class="w-100 btn btn-primary btn-lg" type="submit">상품 등록</button>
</div>
<div class="col">
<button class="w-100 btn btn-secondary btn-lg"
onclick="location.href='items.html'"
th:onclick="|location.href='@{/basic/items}'|"
type="button">취소</button>
</div>
</div>
</form>
</div> <!-- /container -->
</body>
</html>
속성 변경 - th:action
- HTML form에서 action값이 없으면 현재 URL 데이터를 전송한다.
- 상품 등록 폼의 URL과 상품 등록을 처리하는 URL을 똑같이 맞추고 HTTP 메서드로 두 기능을 구분한다.
- 등록 폼은 GET 방식 /basic/items/add
- 등록 처리는 POST 방식 /basic/items/add
취소시 상품 목록으로 이동하는 속성도 추가했다.
상품 등록 - @ModelAttribute
상품 등록 폼은 POST - HTML Form 방식으로 전달한다.
- content-type은 application/x-www-form-urlencoded
- 메세지 바디에 쿼리 파라미터 형식으로 전달 (itemName=itemA&price=10000&quantity=10)
@Controller
@RequestMapping("/basic/items")
@RequiredArgsConstructor
public class BasicItemController {
private final ItemRepository itemRepository;
@GetMapping
public String items(Model model) {
List<Item> items = itemRepository.findAll();
model.addAttribute("items", items);
return "basic/items";
}
@GetMapping("/{itemId}")
public String item(@PathVariable("itemId") Long itemId, Model model) {
Item item = itemRepository.findById(itemId);
model.addAttribute("item", item);
return "basic/item";
}
@GetMapping("/add")
public String addForm() {
return "basic/addForm";
}
// @PostMapping("/add")
public String save(@RequestParam String itemName,
@RequestParam int price,
@RequestParam Integer quantity,
Model model) {
Item item = new Item();
item.setItemName(itemName);
item.setPrice(price);
item.setQuantity(quantity);
itemRepository.save(item);
model.addAttribute("item", item);
return "basic/item";
}
// @PostMapping("/add")
public String addItemV2(@ModelAttribute("item") Item item, Model model) {
itemRepository.save(item);
// model.addAttribute("item", item); 생략 가능
return "basic/item";
}
// @PostMapping("/add")
public String addItemV3(@ModelAttribute Item item) {
itemRepository.save(item);
// model.addAttribute("item", item); 생략 가능
return "basic/item";
}
@PostMapping("/add")
public String addItemV4(Item item) {
itemRepository.save(item);
return "basic/item";
}
// test
@PostConstruct
public void init() {
itemRepository.save(new Item("itemA", 10000, 10));
itemRepository.save(new Item("itemB", 20000, 20));
}
}
save()
- @RequestParam을 사용했다. itemName, price, quantity 요청 파라미터를 데이터 해당 변수에 받는다.
저장된 Item 객체를 생성하고 itemRepository를 통해 저장하고, 저장된 item을 담아서 뷰로 전달한다.
addItemV2()
- @RequestParam으로 변수 하나하나 받는게 불편하기 때문에 @ModelAttribute를 사용했다.
- @ModelAttribute는 Item 객체를 생성하고, 요청 파라미터 값을 프로퍼티 접근법 (setXxx)으로 입력해준다.
- @ModelAttribute는 모델에 지정한 객체를 자동으로 넣어준다. model.addAttribute가 주석이어도 코드는 정상 작동한다.
- 모델에 데이터를 담을 땐 이름이 필요하기 때문에 @ModelAttribute("item") 같이 이름을 지정해줬다. 이렇게 되면 model.addAttribute("item", 데이터); 코드와 똑같아지는 것이다.
addItemV3()
- @ModelAttribute에 모델 이름을 생략했다. 이 땐 클래스명의 앞글자를 소문자로 바꿔서 모델 이름으로 사용한다.
(@ModelAttribute Item item -> "item"이 모델 이름이 되는 것, HelloData라면 "helloData"가 된다)
addItemV4()
- 어노테이션을 생략해도 정상 작동한다. 하지만 명확하게 어노테이션을 작성해주는 것이 좋을 수 있다.
상품 수정
@GetMapping("/{itemId}/edit")
public String editForm(@PathVariable Long itemId, Model model) {
Item item = itemRepository.findById(itemId);
model.addAttribute("item", item);
return "basic/editForm";
}
@PostMapping("/{itemId}/edit")
public String editItem(@PathVariable Long itemId, @ModelAttribute Item item, Model model) {
itemRepository.update(itemId, item);
return "redirect:/basic/items/{itemId}";
}
위와같이 GET, POST 메서드를 다르게 두고 경로를 같은곳으로 지정했다.
상품 등록 메서드의 리턴값이 redirect를 호출하도록 했다.
- 컨트롤러에 매핑된 @PathVariable의 값은 redirect에도 사용할 수 있다.
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<link href="../css/bootstrap.min.css"
th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
<style>
.container {
max-width: 560px;
}
</style>
</head>
<body>
<div class="container">
<div class="py-5 text-center">
<h2>상품 수정 폼</h2>
</div>
<form action="item.html" th:action method="post">
<div>
<label for="id">상품 ID</label>
<input type="text" id="id" name="id" class="form-control" value="1" th:value="${item.id}" readonly>
</div>
<div>
<label for="itemName">상품명</label>
<input type="text" id="itemName" name="itemName" class="form-control" value="상품A" th:value="${item.itemName}">
</div>
<div>
<label for="price">가격</label>
<input type="text" id="price" name="price" class="form-control"
value="10000" th:value="${item.price}">
</div>
<div>
<label for="quantity">수량</label>
<input type="text" id="quantity" name="quantity" class="form-control" value="10" th:value="${item.quantity}">
</div>
<hr class="my-4">
<div class="row">
<div class="col">
<button class="w-100 btn btn-primary btn-lg" type="submit">저장</button>
</div>
<div class="col">
<button class="w-100 btn btn-secondary btn-lg"
onclick="location.href='item.html'"
th:onclick="|location.href='@{/basic/items/{itemId}(itemId=${item.id})}'|" type="button">취소</button>
</div>
</div>
</form>
</div> <!-- /container -->
</body>
</html>
참고로 HTML Form 전송은 GET, POST만 사용할 수 있다. PUT, PATCH는 API 전송시에 사용가능하다.
히든필드를 사용해서 PUT, PATCH 매핑을 사용할 순 있지만 굳이 그럴필요는 없다.
PRG (Post/Redirect/Get)
현재 상품 등록 컨트롤러는 심각한 문제가 있다.
상품을 등록하고 새로고침을 눌렀을 때 상품이 계속해서 중복으로 등록되는 상황이 발생한다.
@PostMapping("/add")
public String addItemV4(Item item) {
itemRepository.save(item);
return "basic/item";
}
상품 등록 폼에서 상품 저장을 누르면, 뷰 템플릿을 리턴해서 상품 상세화면이 출력되도록 되어있다.
즉 상품 등록 폼에서 데이터를 입력하고 저장버튼을 누르면 POST /add + 상품 데이터를 서버로 전송한다.
이 상태에서 새로고침을 하면 마지막에 전송한 POST /add + 상품 데이터 서버 전송이 또 일어나게 된다.
(단순히 뷰 화면만 상품 상세페이지를 보여주고, 실제 로직은 계쏙 상품을 저장하게 되는것이다.)
이 문제를 해결하기 위해 Redirect를 사용해보자
@PostMapping("/add")
public String addItemV5(Item item) {
itemRepository.save(item);
return "redirect:/basic/items/" + item.getId();
}
상품 등록 처리 이후에 뷰 템플릿이 아니라 상품 상세화면으로 리다이렉트 하도록 코드를 작성했다.
이런 문제 해결방식을 PRG라고 한다.
리다이렉트를 하면 상품 저장 후에 뷰만 보여주는것이 아닌 실제 상품 상세 화면으로 다시 이동한다.
따라서 GET /items/{id}가 되고, 새로고침을 해도 중복으로 데이터가 저장되지 않는다.
하지만 위 방식처럼 + item.getId(); 처럼 URL에 변수를 더해서 사용하는것은 위험하다. URL 인코딩이 안될 수 있기 때문이다.
RedirectAttributes
고객 입장에선 저장이 되었는지 한번에 확인하기 어렵다. 저장이 되었다면 저장 완료 라는 메세지를 보여달라는 요구사항이 추가 됬다고 가정해보고 이를 개선해보자.
@PostMapping("/add")
public String addItemV6(Item item, RedirectAttributes redirectAttributes) {
Item savedItem = itemRepository.save(item);
redirectAttributes.addAttribute("itemId", savedItem.getId());
redirectAttributes.addAttribute("status", true);
return "redirect:/basic/items/{itemId}";
}
리다이렉트시에 status=true가 나오도록 추가했다. 그리고 뷰 템플릿에 이 값이 있으면 저장 완료라는 메세지를 출력하도록 코드를 변경해보자
실행해보면 http://localhost:8080/basic/items/3?status=true 와 같이 리다이렉트 결과가 나온다.
RedirectAttribute
- URL 인코딩도 해주고, @PathVariable, 쿼리 파라미터까지 처리해준다.
위의 코드는 {itemId}까지 바인딩 해주고, 나머지는 쿼리파라미터 처리 (?status=true) 해준다.
<body>
<div class="container">
<div class="py-5 text-center">
<h2>상품 상세</h2>
</div>
<h2 th:if="${param.status}" th:text="'저장 완료'"></h2>
- th:if 는 해당 조건이 참이면 실행된다.
- param.status는 타임리프에서 쿼리 파라미터를 편리하게 조회할 수 있다.
쿼리 파라미터를 조회했을 경우 status=true이기 때문에 저장 완료라는 메세지가 출력되었다.
'Spring' 카테고리의 다른 글
| 타임리프 - 스프링 통합과 폼 (1) | 2025.09.06 |
|---|---|
| 타임리프 - 기본 기능 (1) | 2025.08.31 |
| 스프링 MVC - 기본 기능 (1) | 2025.08.25 |
| Spring MVC - 구조 이해 (0) | 2025.06.19 |
| 프론트 컨트롤러 (1) | 2025.05.19 |