[김영한 스프링] 12. 타임리프 스프링 통합과 폼 - 단일 체크 박스

체크 박스 - 단일1

 

단순 HTML 체크 박스

addForm.html

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

log.info("item.open={}", item.getOpen());

@Slf4j 애노테이션 추가

 

 

실행

체크 박스를 체크하면 HTML Form에서 open=on이라는 값이 넘어간다. 스프링은 on이라는 문자를 true타입으로 변환해 준다. (스프링 타입 컨버터가 이 기능을 수행하는데, 뒤에서 설명한다.)

 

 

결과

 

 

주의 - 체크 박스를 선택하지 않을 때

HTML에서 체크 박스를 선택하지 않고 폼을 전송하면 open이라는 필드 자체가 서버로 전송되지 않는다.

 

 

 

 

HTTP 요청 메시지 로깅

logging.level.org.apache.coyote.http11=debug

application.properties에 추가

 

 

체크 박스 선택O

open=on

 

 

체크 박스 선택X

HTTP 메시지 바디를 보면 open의 이름도 전송이 되지 않는 것을 확인할 수 있다.

 

서버에서 Boolean 타입을 찍어보면 결과가 null 인 것을 확인할 수 있다.

log.info("item.open={}", item.getOpen());

 

HTML checkbox는 선택이 안되면 클라이언트에서 서버로 값 자체를 보내지 않는다. 수정의 경우에는 상황에 따라서 이 방식이 문제가 될 수 있다. 사용자가 의도적으로 체크되어 있던 값을 체크를 해제해도 저장 시 아무 값도 넘어가지 않기 때문에, 서버 구현에 따라서 값이 오지 않은 것으로 판단해서 값을 변경하지 않을 수도 있다.

 

이런 문제를 해결하기 위해서 스프링 MVC는 약간의 트릭을 사용하는데, 히든 필드를 하나 만들어서, _open처럼 기존 체크 박스 이름 앞에 언더스코어( _ )를 붙여서 전송하면 체크를 해제했다고 인식할 수 있다. 히든 필드는 항상 전송된다. 따라서 체크를 해제한 경우 여기에서 open 은 전송되지 않고, _open 만 전송되는데, 이 경우 스프링 MVC는 체크를 해제했다고 판단한다.

 

 

기존 코드에 히든 필드 추가

<input type="hidden" name="_open" value="on"/> <!-- 히든 필드 추가 -->

 

 

체크 박스 선택O

체크 박스를 체크하면 스프링 MVC가 open에 값이 있는 것을 확인하고 사용한다. 이때 _open 은 무시한다.

 

 

체크 박스 선택X

체크 박스를 체크하지 않으면 스프링 MVC가 _open만 있는 것을 확인하고, open의 값이 체크되지 않았다고 인식한다.

이 경우 서버에서 Boolean 타입을 찍어보면 결과가 null이 아니라 false인 것을 확인할 수 있다.

 

 

체크 박스 - 단일2

 

타임리프

개발할 때마다 이렇게 히든 필드를 추가하는 것은 상당히 번거롭다. 타임리프가 제공하는 폼 기능을 사용하면 이런 부분을 자동으로 처리할 수 있다.

 

 

타임리프 - 체크 박스 코드 추가

<input type="checkbox" id="open" th:field="*{open}" class="form-check-input">

hidden 필드 삭제

 

 

결과

타임리프를 사용하면 체크 박스의 히든 필드와 관련된 부분도 함께 해결해 준다. HTML 생성 결과를 보면 히든 필드 부분이 자동으로 생성되어 있다.

 

 

체크 박스 선택O

 

 

체크 박스 선택X

 

 

item.html

    <!-- single checkbox -->
    <div>판매 여부</div>
    <div>
        <div class="form-check">
            <input type="checkbox" id="open" th:field="${item.open}" class="form-check-input" disabled>
            <label for="open" class="form-check-label">판매 오픈</label>
        </div>
    </div>

주의: item.html에는 th:object를 사용하지 않았기 때문에 th:field 부분에 ${item.open}으로 적어주어야 한다.

disabled를 사용해서 상품 상세에서는 체크 박스가 선택되지 않도록 했다.

 

 

체크 박스 선택O

타임리프의 체크 확인

checked="checked"

체크 박스에서 판매 여부를 선택해서 저장하면, 조회 시에 checked 속성이 추가된 것을 확인할 수 있다. 이런 부분을 개발자가 직접 처리하려면 상당히 번거롭다. 타임리프의 th:field를 사용하면, 값이 true인 경우 체크를 자동으로 처리해 준다.

 

 

체크 박스 선택X

 

 

editForm.html

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

 

 

체크 박스 선택O

 

 

체크 박스 선택X

 

 

ItemRepository - update() 코드를 다음과 같이 수정하자

        findItem.setOpen(updateParam.getOpen());
        findItem.setRegions(updateParam.getRegions());
        findItem.setItemType(updateParam.getItemType());
        findItem.setDeliveryCode(updateParam.getDeliveryCode());

 

 

 

 

출처 : https://www.inflearn.com/course/%EC%8A%A4%ED%94%84%EB%A7%81-mvc-2

스프링 MVC 2편 - 백엔드 웹 개발 활용 기술 - 인프런 | 강의