[Thymeleaf] 타임리프와 스프링의 통합 3 - 단일 체크박스

기존에 요구 사항을 반영하기 위해 체크 박스를 추가해보자.

---

단일 체크박스 추가하기

@PostMapping("/add")
public String addItem(@ModelAttribute Item item, RedirectAttributes redirectAttributes) {
    log.info("item.open={}", item.getOpen());
    log.info("item.regions={}", item.getRegions());

    Item savedItem = itemRepository.save(item);
    redirectAttributes.addAttribute("itemId", savedItem.getId());
    redirectAttributes.addAttribute("status", true);
    return "redirect:/form/items/{itemId}";
}

데이터가 잘 넘어오는지 확인을 위해 로그를 찍어보자

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

화면의 판매 오픈 체크 박스를 체크 하면 open=on 이라는 값이 넘어간다. html은 true 나 false 같은 불린이 없기 때문에, on으로 값을 내려주면 자동으로 스프링이 true로 해석한다.

참고로 체크 박스 선택 안하면 아예 필드 자체가 서버로 전송되지 않는다.

이것이 등록은 상관이 없는데, 수정하게될 때 문제가 발생할 수 있게 된다. 기존에 체크가 되어있던 판매 상품을 판매 중지하게 되어 여부를 체크 해제 하여 전송해도 아무 값도 넘어가지 않기 때문에 서버가 체크 해제를 인식할 수 없는 아찔한 상황이 발생할 수 있다.

 

이것을 위해 등장한 히든 필드

이런 문제를 해결하기 위해서 스프링이 하나의 히든 필드를 만들어서 _변수명 처럼 변수명 앞에 _를 하나 붙여서 전송하면 체크를 해제 했다고 인식할 수 있게 된다.

이 히든 필드는 어떤상황에도 반드시 전송되기 때문에 체크를 해제한 경우에 open은 전송되지 않고 _open을 수신하게 되면 체크를 해제 했다고 스프링이 판단한다.

<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 의 체크박스의 태생적 한계는 체크가 되지 않으면 아예 값이 넘어오지 않는 문제가 있는데, 개발자 입장에서 false라도 넘어오면 그냥 바로 DB에 업데이트 하면 되는걸 못하게 된다. 이런 히든 필드가 존재하면 이런 히든 필드를 보고 편리하게 사용할 수 있게 된다.

---

아 근데 코드 짤 때마다 히든 필드 직접 넣어야 하는거 이거 진짜에요?

타임리프가 이러한 불편함을 제거하기 위해 폼 기능을 제공한다.

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

기존에 *{} 문법은 어떻게 사용했는가?

<form> 태그 레벨에 th:object로 지역 객체? (그냥 내가 만든 말임ㅋㅋ) 를${}로 선언하고, 이후 폼 태그 안에서는 *{} 으로 접근할 수 있게 된다. 그리고 field 속성에 해당 파라미터를 받으면 id, name, value를 자동으로 만들어준다고 했었다.

th:field는 한 가지 더 기능을 제공해주니.. 히든필드도 하나 추가해준다 ! 

즉, 위 코드는 다음과 같이 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>

이랗게 타임리프를 쓰게 되면 히든 필드와 같은 부분도 자동으로 처리해준다.

이후 제품 상세 등 해당 체크박스로 데이터가 넘어가야하는 부분에 모두 해당 코드를 추가해주면 된다.

그럼 조회시에 checked 라는 속성이 추가되게 되는데, 이또한 타임리프가 th:field의 값이 true면 자동으로 처리해준다.