Spring MVC - 타임리프(Thymeleaf)을 사용한 단일 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>

 form 안에 위 코드를 삽입하여 값이 잘 넘어오는지 logging을 통해 확인해보면 다음과 같다.

 

checkbox 체크한 경우 로그 값

checkbox 체크하지 않은 경우 로그 값

 checkbox를 체크하면 HTML Form에서 open=on 이라는 값이 넘어간다. 스프링은 이 on이라는 문자를 Boolean 데이터 타입인 true 값으로 자동 변환해준다. 그런데 checkbox를 체크하지 않으면 HTML Form은 open이라는 필드 자체를 서버로 전송은 하지 않아 logging으로 확인해보면 null값인 것을 확인할 수 있다. 

 

 여기서 문제가 발생하는데 만약 수정 Form에서 checkbox가 체크가 되어있는 것을 체크 해제하고 수정했을 시 checkbox를 체크하지 않으면 open 필드는 아예 전달이 되질 않으므로 서버에서는 open 필드가 수정되었는지 모르게 된다. 따라서 개발자가 직접 해당 checkbox의 값 자체가 안 들어올 때와 true로 들어올 때에 대한 분기 처리를 해주어야 하는 번거로움이 생긴다.

 

 스프링에서는 이러한 번거로움을 해결해주는 방법이 있다. <input> 태그 hidden 타입으로 필드명을 checkbox의 필드명 앞에 언더스코어( _ )를 붙여서 전송하면 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>

checkbox 체크하지 않은 경우 로그 값

• checkbox 체크한 경우 : open=on&_open=on
   - 스프링에서 open값이 있는 것을 확인하고 ture값으로 바인딩, _open은 무시
• checkbox 체크하지 않은 경우 : _open=on
   - 스프링에서 _open 필드만 온것을 확인하고 open 필드의 값이 체크되지 않았다고
    인식하여 false값으로 바인딩

---

 

타임리프를 사용한 단일 checkbox

 이제 타임리프를 사용하여 단일 checkbox를 얼마나 쉽게 사용할 수 있는지 알아보자.

간단하게 타임리프 속성인 th:field 만 추가해주면 된다.

 

<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의 소스 코드를 보면 다음과 같다.

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

 기본적으로 체크박스를 체크해주면  id="open" name="open" value="true" checked="checked"가 추가되고

<input type="hidden" name="_open" value="on">와 같이 <input> 태그를 자동으로 생성해준다.
(체크를 안해주면 id="open" name="open" value="ture"가 추가되고 checked="checked"는 추가되지 않는다.)

 

 이와같이 타임리프를 사용하면 단순히 th:field 만 추가하여 간단하게 체크된 필드를 true, false으로 데이터를 전달할 수 있다.