타임리프

타임리프가 제공하는 입력 폼 기능을 적용해서 기존 프로젝트의 폼 코드를 타임리프가 지원하는 기능을 사용해서 효율적으로 개선해보자

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

실제 코드를 보겠습니다.

th: field

렌더링 전

<input type=”text” th: field=”*{itemName}” />

렌더링 후

<input type=”text” id=”itemName” name=”itemName” th:value=”*{itemName}” />

• id, name, value가 등록됩니다.
• field를 사용함으로서 코드가 간결해집니다.

코드 실전

실제코드(추가)

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