Ch02. 타임리프(스프링 통합과 폼) - 체크박스(단일)

체크 박스 추가(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>

• 값이 잘 전송되는지 Log를 찍어보자

Log 찍어보기

• 체크가 되어 있을 경우 True가 전달된다.
• 체크가 되어 있지 않을 경우?
  • false를 기대하지만, null 값이 전달이 된다.

HTML이 CheckBox가 체크가 안될경우 값을 보내지 않기 떄문

• HTML checkbox는 선택이 안되면 클라이언트에서 서버로 값 자체를 보내지 않는다.
  • 수정의 경우에는 상황에 따라서 이 방식이 문제가 될 수 있다.
  • 사용자가 의도적으로 체크되어 있던 값을 체크를 해제해도 저장 시 아무 값도 넘어가지 않기 때문에, 서버 구현에 따라서 값이 오지 않은 것으로 판단해서 값을 변경하지 않을 수도 있다
• Spring은 이러한 문제를 해결하기 위해 약간의 트릭을 제공(_체크박스 명)
  • 히든 필드를 하나 만들어서, _open 처럼 기존 체크 박스 이름 앞에 언더스코어( _ )를 붙여서 전송하면 체크를 해제했다고 인식할 수 있다(히든 필드는 항상 전송된다)
  • 따라서 체크를 해제한 경우 여기에서 open 은 전송되지 않고, _open 만 전송되는데, 이 경우 스프링 MVC는 체크를 해제했다고 판단한다.

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

• 체크박스 체크시 open & _open 이 on 값이 전송되므로 _open 은 무시
• 체크박스 미체크시 _open 만 on 값이 전송되므로 SpringMVC가 체크되지 않았다고 판단하여 false로 바꿔준다.
• 매번 이렇게 hidden field를 넣기 불편하기 때문에 ThymeLeaf가 제공하는 기능을 사용해 보자

ThymeLeaf

• AddForm.html

 

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

 

thymeleaf가 자동으로 생성

• ItemForm.html

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

thymeLeaf가 checked 옵션을 넣는거 까지 알아서 해준다

• EditForm.html

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

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