[스프링 MVC 2편 - 백엔드 웹 개발 활용 기술] 02. 타임리프 스프링 통합과 폼

1. 타임리프 스프링 통합

스프링 통합으로 추가되는 기능들

- 스프링의 SpringEL 문법 통합

- ${@myBean.dosomething()}처럼 스프링 빈 호출 지원

- 편리한 폼 관리를 위한 추가 속성 (th:object, th:field, th:errors, th:errorclass)

- 폼 컴포넌트 기능 (checkbox, radio button, List 등을 편리하게 사용할 수 있는 기능)

- 스프링의 메시지, 국제화 기능의 편리한 통합

- 스프링의 검증, 오류 처리 통합

- 스프링의 변환 서비스 통합(ConversionService)

 

2. 입력 폼 처리

    @GetMapping("/add")
    public String addForm(Model model) {
        model.addAttribute("item", new Item());
        return "form/addForm";
    }

th:object를 적용하려면 먼저 해당 오브젝트 정보를 넘겨주어야 한다.

넘겨줄 오브젝트가 없다면 비어있는 오브젝트라도 만들어 뷰에 전달한다.

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

th:object="${item}": <form>에서 사용할 객체를 지정한다. 선택 변수 식(*{...})을 적용할 수 있다.

th:field="*{itemName}": ${item.itemName}과 같다. th:object로 item을 선택했기 때문에 적용할 수 있다.

//렌더링 전
<input type="text" th:field="*{itemName}" />

//렌더링 후
<input type="text" id="itemName" name="itemName" th:value="*{itemName}" />

 

3. 체크 박스 - 단일

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

HTML checkbox는 선택이 안되면 클라이언트에서 서버로 값 자체를 보내지 않는다.

사용자가 의도적으로 체크되어 있던 값을 체크를 해제해도 저장시 아무 값도 넘어가지 않기 때문에, 서버 구현에 따라서 값이 오지 않은 것으로 판단해서 값을 변경하지 않을 수도 있다.

이런 문제를 해결하기 위해서 스프링 MVC는 약간의 트릭을 사용하는데, 히든 필드를 하나 만들어서, _open같이 기존 체크 박스 이름 앞에 언더스코어를 붙여서 전송하면 체크를 해제했다고 인식할 수 있다.

따라서 체크를 해제한 경우 여기에서 open은 전송되지 않고, _open만 전송되는데, 이 경우 스프링 MVC는 체크를 해제했다고 판단한다.

<!-- 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>
 
//렌더링 후
 <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>

개발할 때 마다 히든 필드를 추가하는 것은 상당히 번거롭다.

타임리프가 제공하는 폼 기능을 사용하면 이런 부분을 자동으로 처리할 수 있다.

타임리프를 사용하면 체크 박스의 히든 필드와 관련된 부분도 함께 해결해준다.

 

4. 체크 박스 - 멀티

@ModelAttribute의 특별한 사용법

@ModelAttribute("regions")
public Map<String, String> regions() {
    Map<String, String> regions = new LinkedHashMap<>();
    regions.put("SEOUL", "서울");
    regions.put("BUSAN", "부산");
    regions.put("JEJU", "제주");
    return regions;
}

등록 폼, 상세화면, 수정 폼에서 모두 서울, 부산, 제주라는 체크 박스를 반복해서 보여주어야 한다.

이렇게 하려면 각각의 컨트롤러에 model.addAttribute(...)을 사용해서 체크 박스를 구성하는 데이터를 반복해서 넣어주어야 한다.

@ModelAttribute는 이렇게 컨트롤러에 있는 별도의 메서드에 적용할 수 있다.

이렇게하면 해당 컨트롤러를 요청할 때 regions에서 반환한 값이 자동으로 모델에 담기게 된다.

물론 이렇게 사용하지 않고, 각각의 컨트롤러 메서드에서 모델에 직접 데이터를 담아서 처리해도 된다.

<!-- 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>
 
 //렌더링 후
  <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>

멀티 체크박스는 같은 이름의 여러 체크박스를 만들 수 있다.

그런데 문제는 이렇게 반복해서 HTML 태그를 생성할 때, 생성된 HTML 태그 속성에서 name은 같아도 되지만, id는 모두 달라야 한다.

따라서 타임리프는 체크박스를 each 루프 안에서 반복해서 만들 때 임의로 1, 2, 3... 숫자를 뒤에 붙여준다.

 

5. 라디오 버튼

라디오 버튼은 이미 선택이 되어 있다면, 수정시에도 항상 하나를 선택하도록 되어 있으므로 체크 박스와 달리 별도의 히든필드를 사용할 필드가 없다.

public enum ItemType {

    BOOK("도서"), FOOD("식품"), ETC("기타");
    
    private final String description;
    
    ItemType(String description) {
        this.description = description;
    }
    
    public String getDescription() {
        return description;
    }
 }

@ModelAttribute("itemTypes")
    public ItemType[] itemTypes() {
    return ItemType.values();
}

<!-- radio button -->
//렌더링 전
 <div>
    <div>상품 종류</div>
    <div th:each="type : ${itemTypes}" class="form-check form-check-inline">
        <input type="radio" th:field="*{itemType}" th:value="${type.name()}" class="form-check-input">
        <label th:for="${#ids.prev('itemType')}" th:text="${type.description}" class="form-check-label">
            BOOK
        </label>
    </div>
 </div>
 
 //렌더링 후
 <div>
    <div>상품 종류</div>
    <div class="form-check form-check-inline">
        <input type="radio" value="BOOK" class="form-check-input" id="itemType1" name="itemType">
        <label for="itemType1" class="form-check-label">도서</label>
    </div>
    <div class="form-check form-check-inline">
        <input type="radio" value="FOOD" class="form-check-input" id="itemType2" name="itemType" checked="checked">
        <label for="itemType2" class="form-check-label">식품</label>
    </div>
    <div class="form-check form-check-inline">
        <input type="radio" value="ETC" class="form-check-input" id="itemType3" name="itemType">
        <label for="itemType3" class="form-check-label">기타</label>
    </div>
 </div>

 

6. 셀렉트 박스

/**
* FAST: 빠른 배송
* NORMAL: 일반 배송
* SLOW: 느린 배송
*/
@Data
@AllArgsConstructor
public class DeliveryCode {
    private String code;
    private String displayName;
}

@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;
}

<!-- SELECT -->
//렌더링 전
 <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>
 
 //렌더링 후
 <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>