[study] 스프링MVC2 - 2. 타임리프 스프링 통합과 폼
김영한님의 스프링 mvc2편 - 벡엔트 웹 개발 활용 기술 을 듣고 정리한 내용입니다.
입력 폼 처리
th:object : 커맨드 객체를 저장한다.
*{...} : 선택 변수 식이라고 한다. th:object 에서 선택한 객체에 접근한다.
th:field : HTML 태그의 id name value 속성을 자동 처리해준다.
렌더링 전
<input type="text" th:field="*{itemName}" />
렌더링 후
<input type="text" id="itemName" name="itemName" th:value="*{itemName}" />
@GetMapping("/add")
public String addForm(Model model) {
model.addAttribute("item", new Item());
return "form/addForm";
}
addForm.html 변경부분
<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>
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:filed 에서 지정한 변수의 값을 사용한다. value=""
id 속성을 제거해도 자동으로 만들어진다.
렌더링 전
<input type="text" id="itemName" th:field="*{itemName}" class="form-control" placeholder="이름을 입력하세요">
렌더링 후
<input type="text" id="itemName" class="form-control" placeholder="이름을 입력하세요" name="itemName" value="">
th:object , th:field 덕분에 폼을 개발할 때 약간의 편리함을 얻었다.
요구사항 추가
체크박스 라디오버튼 셀렉트 박스를 편리하게 사용하는법.
public enum ItemType {
BOOK("도서"), FOOD("음식"), ETC("기타");
private final String description;
ItemType(String description) {
this.description = description;
}
public String getDescription() {
return description;
}
}
배송방식
/**
* FAST: 빠른 배송
* NORMAL: 일반 배송
* SLOW: 느린 배송
*/
@Data
@AllArgsConstructor
public class DeliveryCode {
private String code;
private String displayName;
}
상품 Item
@Data
public class Item {
private Long id;
private String itemName;
private Integer price;
private Integer quantity;
private Boolean open; //판매 여부
private List<String> regions; //등록 지역
private ItemType itemType; //상품 종류
private String deliveryCode; //배송 방식
public Item() {
}
public Item(String itemName, Integer price, Integer quantity) {
this.itemName = itemName;
this.price = price;
this.quantity = quantity;
}
}
<hr class="my-4">
<!-- single checkbox -->
<div>판매 여부</div>
<div>
<div class="form-check">
<input type="checkbox" id="open" name="open" class="form-check-input">
<label for="open" class="form-check-label">판매 오픈</label>
</div>
</div>
실행 로그
FormItemController : item.open=true //체크 박스를 선택하는 경우
FormItemController : item.open=null //체크 박스를 선택하지 않는 경우
체크박스를 선택하지 않았을때 open 이라는 필드 자체가 서버로 전송되지 않는다.
이런 문제를 해결하기 위해 스프링 MVC는 히든 필드를 하나 만들어서, _open 처럼 기존 체크박스 이름앞에
언더스코어를 붙여서 전송하면 체크를 해제했다고 인식할 수 있다.
히든필드는 항상 전송된다. 따라서 체크를 해제한 경우 여기서 open은 전송되지 않고 _open만 전송되는데
이 경우 스프링 mvc는 체크를 해제했다고 판단한다.
기존코드에 hidden 필드 추가
<!-- single checkbox -->
<div>판매 여부</div>
<div>
<div class="form-check">
<input type="checkbox" id="open" name="open" class="form-check-input">
<input type="hidden" name="_open" value="on"/> <!-- 히든 필드 추가 -->
<label for="open" class="form-check-label">판매 오픈</label>
</div>
</div>
실행로그
FormItemController : item.open=true //체크 박스를 선택하는 경우
FormItemController : item.open=false //체크 박스를 선택하지 않는 경우
타임리프 체크박스 체크코드
<!-- single checkbox -->
<div>판매 여부</div>
<div>
<div class="form-check">
<input type="checkbox" id="open" th:field="*{open}" class="form-check-input">
<label for="open" class="form-check-label">판매 오픈</label>
</div>
</div>
생성결과
<!-- single checkbox -->
<div>판매 여부</div>
<div>
<div class="form-check">
<input type="checkbox" id="open" class="form-check-input" name="open" value="true">
<input type="hidden" name="_open" value="on"/>
<label for="open" class="form-check-label">판매 오픈</label>
</div>
</div>타임리프를 사용하면 체크 박스의 히든 필드와 관련된 부분도 함께 해결해준다.
HTML 생성 결과를 보면 히든 필드 부분이 자동으로 생성되어 있다.
체크박스 멀티
<!-- multi checkbox -->
<div>
<div>등록 지역</div>
<div th:each="region : ${regions}" class="form-check form-check-inline">
<input type="checkbox" th:field="*{regions}" th:value="${region.key}" class="form-check-input">
<label th:for="${#ids.prev('regions')}"
th:text="${region.value}" class="form-check-label">서울</label>
</div>
</div>
th:for="${#ids.prev('regions')}"
멀티 체크박스는 같은이름의 여러 체크박스 만들기가 가능하다.
문제는 반복해서 태그를 생성시 name은 같아도 되지만 id는 달라야한다.
따라서 타임리프는 체크박스를 each 루프를 돌면서 반복할때 임의로 1, 2, 3 을 붙여준다.
each로 체크박스가 반복생성된 결과 - id 뒤에 숫자가 추가
<input type="checkbox" value="SEOUL" class="form-check-input" id="regions1" name="regions">
<input type="checkbox" value="BUSAN" class="form-check-input" id="regions2" name="regions">
<input type="checkbox" value="JEJU" class="form-check-input" id="regions3" name="regions">html의 id가 타임리프에 의해 동적으로 생성되므로 label for="id값" 으로 label의 id 값을 임의지정이 어렵다.
타임리프는 ids.prev(...) , ids.next(...) 를 제공하여 동적 생성 id 값을 사용할 수 있다.
타임리프 HTML 생성결과
<div>
<div>등록 지역</div>
<div class="form-check form-check-inline">
<input type="checkbox" value="SEOUL" class="form-check-input" id="regions1" name="regions"><input type="hidden" name="_regions" value="on"/>
<label for="regions1"
class="form-check-label">서울</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" value="BUSAN" class="form-check-input" id="regions2" name="regions"><input type="hidden" name="_regions" value="on"/>
<label for="regions2"
class="form-check-label">부산</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" value="JEJU" class="form-check-input" id="regions3" name="regions"><input type="hidden" name="_regions" value="on"/>
<label for="regions3"
class="form-check-label">제주</label>
</div>
</div>
라디오버튼
라디오버튼은 체크박스와는 다르게 별도의 히든필드를 사용할 필요가 없다.
타임리프에서 Enum 직접 사용하기
@ModelAttribute("itemTypes")
public ItemType[] itemTypes() {
return ItemType.values();
}
<div th:each="type : ${T(hello.itemservice.domain.item.ItemType).values()}">
스프링 EL 문법으로 ENUM 직접 사용 가능하다. ENUM의 values()를 호출하면 해당 ENUM의 모든 정보가 배열로 반환된다.
셀렉트박스
@ModelAttribute("deliveryCodes")
public List<DeliveryCode> deliveryCodes() {
List<DeliveryCode> deliveryCodes = new ArrayList<>();
deliveryCodes.add(new DeliveryCode("FAST", "빠른 배송"));
deliveryCodes.add(new DeliveryCode("NORMAL", "일반 배송"));
deliveryCodes.add(new DeliveryCode("SLOW", "느린 배송"));
return deliveryCodes;
}
deleveryCode 라는 자바 객체를 사용하는 방법.
<div>
<div>배송 방식</div>
<select th:field="*{deliveryCode}" class="form-select">
<option value="">==배송 방식 선택==</option>
<option th:each="deliveryCode : ${deliveryCodes}" th:value="${deliveryCode.code}"
th:text="${deliveryCode.displayName}">FAST</option>
</select>
</div>
타임리프로 생성된 HTML
<!-- SELECT -->
<div>
<div>배송 방식</div>
<select class="form-select" id="deliveryCode" name="deliveryCode">
<option value="">==배송 방식 선택==</option>
<option value="FAST">빠른 배송</option>
<option value="NORMAL">일반 배송</option>
<option value="SLOW">느린 배송</option>
</select>
</div>
https://www.inflearn.com/course/%EC%8A%A4%ED%94%84%EB%A7%81-mvc-2/dashboard
스프링 MVC 2편 - 백엔드 웹 개발 활용 기술 - 인프런 | 강의
웹 애플리케이션 개발에 필요한 모든 웹 기술을 기초부터 이해하고, 완성할 수 있습니다. MVC 2편에서는 MVC 1편의 핵심 원리와 구조 위에 실무 웹 개발에 필요한 모든 활용 기술들을 학습할 수 있
www.inflearn.com