Ch02. 타임리프(스프링 통합과 폼) - 입력 폼 처리

• th:object = 커맨드 객체를 지정
• *{...} = 선택 변수 식, th:object에서 선택한 객체에 접근한다.
• th:field = HTML 태그의 id, name, value 속성을 자동으로 처리한다

AddForm 수정

@GetMapping("/add")
public String addForm(Model model) {
    model.addAttribute("item", new Item()); //빈 모델이라도 넘겨주어야 한다
    return "form/addForm";
}

• 빈 객체라도 모델로 넘겨야 하기 때문에 addForm 메서드에서 빈객체를 넘겨준다.

AddForm, EditForm HTML 수정

• AddForm 수정

<form action="item.html" th:action th:object="${item}" method="post">
        <div>
            <label for="itemName">상품명</label>
            <input type="text" id="itemName"  th:field="*{itemName}" class="form-control" placeholder="이름을 입력하세요">
        </div>
        <div>
            <label for="price">가격</label>
            <input type="text" id="price" th:field="${item.price}" class="form-control" placeholder="가격을 입력하세요">
        </div>
        <div>
            <label for="quantity">수량</label>
            <input type="text" id="quantity" th:field="*{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='@{/form/items}'|"
                        type="button">취소</button>
            </div>
        </div>

    </form>

• editForm 수정

<form action="item.html" th:action th:object="${item}" method="post">
    <div>
        <label for="id">상품 ID</label>
        <input type="text" id="id" th:field="*{id}" class="form-control" value="1"  readonly>
    </div>
    <div>
        <label for="itemName">상품명</label>
        <input type="text" id="itemName" th:field="*{itemName}" class="form-control" value="상품A" >
    </div>
    <div>
        <label for="price">가격</label>
        <input type="text" id="price" class="form-control" value="10000" th:field="*{price}">
    </div>
    <div>
        <label for="quantity">수량</label>
        <input type="text" id="quantity" class="form-control" value="10" th:field="*{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='@{/form/items/{itemId}(itemId=${item.id})}'|"
                    type="button">취소</button>
        </div>
    </div>

</form>

• th:object="${item}" : 에서 사용할 객체를 지정한다. 선택 변수 식( *{...} )을 적용할 수 있다.
• th:field="*{itemName}"
  • *{itemName} 는 선택 변수 식을 사용했는데, ${item.itemName}과 같다. 앞서 th:object로 item을 선택했기 때문에 선택 변수 식을 적용할 수 있다.
  • th:field 는 id , name , value 속성을 모두 자동으로 만들어준다.
    • id : th:field 에서 지정한 변수 이름과 같다. id="itemName"
    • name : th:field 에서 지정한 변수 이름과 같다. name="itemName"
    • value : th:field 에서 지정한 변수의 값을 사용한다. 
• 검증을 처리할때, 실제 위력이 나타나므로 이후에 알아보자