Spring MVC - 타임리프(Thymeleaf)를 이용한 입력 폼(Form) 사용법

 

 

 

 

타임리프(Thymeleaf)를 이용한 입력 폼(Form) 사용법

• th:object
   - 커멘드 객체를 지정하여 Form에서 사용
• *{ ... }
   - 선택 변수식이라고 한다. th:object 에서 선택한 객체를 편리하게 프로퍼티 접근법을 이용할 수 있다.
• th:field
   - HTML 태그의 id, name, value 속성을 자동으로 처리해 준다.

 

 

등록 form 사용 예시

 

<form action="item.html" th:action th:object="${item}" method="post">

• th:action
   - 값을 안 넣어주면 같은 URL에 POST 메서드 방식으로 요청한다.
• th:object="${item}"
   - request 영역에 저장되어있는 item 객체를 가져온다
   - 해당 폼에서 item 객체 사용 가능

 

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

• th:field="*{itemName}"
   - 선택 변수 식이라고 한다. th:object에서 선택한 객체 프로퍼티에 접근할 수 있다.
   - ${item.itemName} = *{itemName}
   - 자동으로 id="itemName", name="itemName", value="" 추가 해준다.

 

전체 코드

<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="*{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>

 랜더링된 HTML의 소스 코드를 보면 다음과 같다.

<form action="" method="post">
    <div>
        <label for="itemName">상품명</label>
        <input type="text" id="itemName" class="form-control" placeholder="이름을 입력하세요" name="itemName" value="">
    </div>
    <div>
        <label for="price">가격</label>
        <input type="text" id="price" class="form-control" placeholder="가격을 입력하세요" name="price" value="">
    </div>
    <div>
        <label for="quantity">수량</label>
        <input type="text" id="quantity" class="form-control" placeholder="수량을 입력하세요" name="quantity" value="">
    </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=&#39;/form/items&#39;"
                    type="button">취소</button>
        </div>
    </div>

</form>

 

 

 

th:object를 사용하는 이유

 

 

 그런데 생각해보면 name="itemName" 이런 식으로 데이터를 전달해주면 될 것 같은데 굳이 Item 객체를 form에서 th:object로 지정하여 사용하는 이유가 뭘까?

 

 다음과 같은 이유가 존재한다.

1. name으로 넘긴 데이터명이 저장할 객체의 필드명과 일치하지 않아 바인딩이 안되어도 실행된다.
   - 바인딩이 안되었다는 건 데이터가 제대로 전달하지 못했다는 의미이다. 근데 그대로 실행이 되기
    때문에 나중에 이 문제를 찾기가 어려워진다.
2. 검증에 사용된다. 검증에 통과하지 못하면 입력했던 값들을 화면에 다시 출력하기 위해 사용된다.

---