Spring MVC | (3) 상품 등록, @ModelAttribute 와 @RequestParam 차이점

2024. 4. 1. 20:45

컨트롤러 - 상품 등록 [BasicItemController] 에 추가

상품 등록 페이지를 열때는 GET (실제 등록 X)

//상품 등록 
@GetMapping("/add")
public String addForm(){
    return "basic/addForm";
}

상품을 실제로 등록할 때는 POST

@PostMapping("/add")
public String save(){
    return "basic/addForm";
}

같은 URL인데 HTTP 메서드로 기능을 구별해준다.

뷰 템플릿 [addForm.html]

/resources/templates/basic/addForm.html

타임리프 설정

<html xmlns:th="http://www.thymeleaf.org">
<link th:href="@{/css/bootstrap.min.css}"

<!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">
    <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

상품 등록 버튼을 눌렀을때 동적으로 URL이 변경되도록 하는 액션속성

사실상 GET, POST 같은 URL (basic/items/add) 이기 때문에 안 써도 된다.
- th:action="/basic/items/add" ▶ <form action="item.html" th:action method="post">

등록 페이지에 갔을때 '페이지 소스보기' 를 하면 action="" 비어있는 것을 확인할 수 있다.

취소 버튼 눌렀을때 url 수정하기

취소했을때는 목록으로 돌아가기

th:onclick="|location.href='@{/basic/items}'|"

<button class="w-100 btn btn-secondary btn-lg"
        onclick="location.href='items.html'"
        th:onclick="|location.href='@{/basic/items}'|"
        type="button">취소
</button>

이제 실제로 상품을 등록해보자

상품 등록 POST - @ModelAttribute

우선 @ModelAttribute 와 @RequestParam 차이점을 알아보자

@RequestParam

@RequestParam - 상품 등록 처리

클라이언트의 HTTP POST 요청파라미터를 처리하기 위해 @RequestParam 을 사용한다

[addItemV1 - BasicItemController에 추가]

@PostMapping("/add")
public String addItemV1(@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 "";
}

@RequestParam String itemName 은 addForm.html 의 name="" 값이다.

<input type="text" id="itemName" name="itemName" ~ >

실제 상품을 등록한 뷰 화면

@ModelAttribute

@ModelAttribute - 상품 등록 처리

[addItemV2 - BasicItemController에 추가]

@PostMapping("/add")
public String addItemV2(@ModelAttribute("item") Item item ) {
	
	itemRepository.save(item);
	//model.addAttribute("item",item);
    
	return "basic/item";
}

@ModelAttribute - 요청 파라미터 처리를 해준다.
- Item 객체를 생성하고 요청 파라미터 값을 setXxxx 으로 Item 객체의 필드에 값을 설정해준다.
- Spring이 자동으로 처리해줌 개발자가 직접 setXxxx 메서드를 호출할 필요가 없어진다.
- ```
Item item = new Item();
item.setItemName(itemName);
item.setPrice(price);
item.setQuantity(quantity);
```
@ModelAttribute 은 자동으로 model에 뷰를 넣어준다.
- @ModelAttribute("item") 이름이 ▶ model.addAttribute("item", item) 이다.
- model.addAttribute("item", item) 가 주석처리를 해도 잘 동작한다.

ModelAttribute 이름 생략

[addItemV3 - BasicItemController에 추가]

@PostMapping("/add")
public String addItemV3(@ModelAttribute Item item) {
	
	itemRepository.save(item);
	//model.addAttribute("item",item);
    
	return "basic/item";
}

@ModelAttribute("item") Item item 이름을 생략하면 클래스의 첫글자만 소문자로 변경해서 등록한다.
클래스명 Item ▶ item

ModelAttribute 전체 생략

[addItemV4 - BasicItemController에 추가]

@PostMapping("/add")
public String addItemV4(Item item) {
	
	itemRepository.save(item);
    
	return "basic/item";
}

addItemV1 처럼 단순타입인 String이라면 @RequestParam 이 자동적용되고
객체 타입인 경우 @ ModelAttribute가 자동적용이 된다.
이것 또한 클래스명 Item ▶ item 소문자로 변경해서 모델에 담긴다.

LIST

'Spring MVC 웹페이지 만들기' 카테고리의 다른 글

Spring MVC \| (5) PRG / Redirect / GET, RedirectAttributes - 저장완료 메세지 추가 (0)	2024.04.02
Spring MVC \| (4) 상품 수정, 리다이렉트 (0)	2024.04.02
Spring MVC \| (2) 상품 상세 , 타임리프 (0)	2024.03.31
Spring MVC \| (1) 상품 목록, 뷰 템플릿 , 타임리프 (0)	2024.03.27
Spring MVC \| 상품 도메인 개발 (Item, ItemRepository 클래스 및 테스트 코드 작성) (0)	2024.03.27

혼자 깨닫기 위함