타임리프 - 스프링 통합과 폼 : 타임리프 입력 폼 처리

인프런 영한님의 스프링mvc2편을 보고 정리한 글입니다.

무엇을 배웠나요?

• 지금부터 타임리프가 제공하는 입력 폼 기능을 적용해서 기존 프로젝트의 폼 코드를 타임리프가 지원하는 기능을 사용해서 효율적으로 개선
• th:object : 커맨드 객체를 지정한다.
• *{…} : 선택 변수 식이라고 한다. th:object 에서 선택한 객체에 접근한다.
• th:field : HTML태그의 id, name, value 속성을 자동으로 처리 해준다.
• th:field렌더링 전
• <input type="text" th:field="*{itemName}" />
• th:field렌더링 후
• <input type="text" id="itemName" name="itemName" th:value="*{itemName}" />
• th:object 적용하려면 먼저 해당 오브젝트 정보를 넘겨주어야 한다.
• model.addAttribute("item", new Item());
• th:object="${item}": <form> 에서 사용할 객체를 지정한다. 선택 변수식(*{…})을 적용할수도 있다.
• 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 에서 지정한 변수의 값을 사용한다. value=""

궁금한 점은 무엇인가요?

궁금한 점은 무엇인가요?

• HTML태그의 id, name, value는 무엇인가
• id 속성은 고유한 식별을 목적으로 하며, name 속성은 form컨트롤 요소의 값을(value)를 서버로 전송하기 위해 필요한 속성입니다. 참고
• HTML에서 button태그의 onclick은 무엇인가
• 링크주소를 나타 낼때 onclick을 사용한다. 참고
• placeholder는 무슨 역할을 하는가위의 이미지와 같은 역할을 한다.

플레이스 홀더

더 필요하다고 생각한 것이 있나요?

• 프론트엔드의 지식이 부족하다.

코드

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