<aside> 💡 input type="checkbox"의 체크여부를 스테이트로 관리하는 방법에 대해 알아보자.

</aside>

How does it work???

우리는 form안에 여러 input태그들을 넣어놓고 마지막에 submit하는 형식을 자주 접하게 된다. 일반적인 text나 number type인경우에는 단순히 onChange나 ref를 통해 state관리가 매우 편하겠지만, checkbox의 경우 약간 다르기에 정리하고자 한다.

가져오는 방식은 다음과 같다.

const [reminder, setReminder] = setState(false)
...
//reminder가 트루일때는 checked가 되도록, 아니면, false가 되도록 설정
//onChange함수를 통해 값이 변할때 마다 reminder가 변하도록 설정. 
<div className="form-control form-control-check">
        <label>Set Reminder</label>
        <input
          type="checkbox"
          checked={reminder ? true : false}
          value={reminder}
          onChange={(e) => setReminder(e.currentTarget.checked)}
        />
</div>

과정을 정리하자면 아래와 같다.

1. input의 checked상태가 변할때 마다 setState함수를 통해 그 값을 저장(e.currentTarget.checked). (주의, text나 다른 타입은 e.target.value임에 반해, 체크박스는 e.currentTarget.checked가 되게 된다.)
2. 저장된 상태를 통해, state와 실제 체크여부상태를 일치시키기