입력 폼 처리

✏️ 상품 등록 폼

📍 기존 코드 - V1.

• POST 요청을 하기 위한 입력폼
• Controller 계층
  • 단순 요청 url 을 form 으로 전달해주는 역할만 수행

    @GetMapping("/add")
    public String addForm() {
        return "form/addForm";
    }

• Web 계층
  • thymeleaf 기능을 사용하지 않고 순수 html 의 기능이 사용되고 있음

<form action="item.html" th:actionmethod="post">
        <div>
            <label for="itemName">상품명</label>
            <input type="text" 
                   id="itemName" 
                   name="itemName" 
                   class="form-control" 
                   placeholder="이름을 입력하세요">
        </div>

          ...
</form>

📍 thymeleaf 를 사용해 리팩토링 - V2.

• Controller 계층
  • model 에 빈 Item 객체를 넘겨줌

    @GetMapping("/add")
    public String addForm(Model model) {
        model.addAttribute("item", new Item());
        return "form/addForm";
    }

• Web 계층
  • model 에서 받은 item 을 object 속성으로 선언
  • 자식 태그의 속성에서 th:field 를 사용하면 id 와 name , value 를 대신할 수 있음

⚠️ lebel 태그의 for 속성은 input 의 id 를 기반으로 묶이게 되는데 코드상으로는 id 가 없기 때문에 붉은색 오류 표시가 나타난다.

• 랜더링 시점에선 타임리프가 field 를 기반으로 Id 를 만들어주기 때문에 무시해도 되는 오류표시이다.

<form action="item.html" th:object="${item}" th:actionmethod="post">
        <div>
            <label for="itemName">상품명</label>
            <input type="text" 
                   th:field="${item.itemName}" 
                   class="form-control" 
                   placeholder="이름을 입력하세요">
        </div>

          ...
</form>

⚠️ textarea 일 경우는 value 가 먹지 않는다.
- 이 경우 test 에 value 값을 넣어줘야 작동한다.

📍 선택변수를 사용해 리팩토링 - V3.

• 선택변수를 사용하면 item 도 생략 할 수 있다.
  • th:field="${item.itemName}" → th:field="*{itemName}"

<input type="text" 
       th:field="*{itemName}" 
       class="form-control" 
       placeholder="이름을 입력하세요">

📍 소스 보기

• 나머지 항목도 교체해주었다.
• th:field 속성이 사라지고 id, name , value 속성으로 바뀐걸 확인할 수 있다.
  • value 는 field 에서 지정한 변수의 값을 사용한다.
    • 예제에서는 item 을 new 로 생성후 필드의 값을 넣지 않았기 때문에 공란이다.

<form action="" method="post">
        <div>
            <label for="itemName">상품명</label>
            <input type="text" class="form-control" placeholder="이름을 입력하세요" id="itemName" name="itemName" value="">
        </div>
        <div>
            <label for="price">가격</label>
            <input type="text" class="form-control" placeholder="가격을 입력하세요" id="price" name="price" value="">
        </div>
        <div>
            <label for="quantity">수량</label>
            <input type="text" class="form-control" placeholder="수량을 입력하세요" id="quantity" name="quantity" value="">
        </div>

        ...
</form>

✏️ 상품 수정 폼

📍 기존 코드 - V1.

• 기존에 등록된 내용을 수정 폼에 미리 입력해두기 위해서 value 에 값이 입력되어 있다.
  • th:value="${item.id}"
    • model 로 전달받은 Item 의 기존 값을 받을 수 있음
• id 와 name 은 순수 html 을 사용하고 있다.

<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>
...

📍 선택 변수 사용 - V3.

• 지역변수로 object 를 선언하고 그 값으로 model 에서 item 을 받아온다.
• id , value , name 을 th:field 로 대체하고 선택변수를 사용해 item 도 생략한다.
• 순수 html 태그도 필요없으니 제거한다.
• 결과적으로 intput 에 있어선 type , th:field , class 속성만 관리해주면 된다.

<form action="item.html" th:object="${item}" th:action method="post">
    <div>
        <label for="id">상품 ID</label>
        <input type="text" 
               th:field="*{id}"
               class="form-control" 
               readonly>
    </div>
...