antd의 Checkbox 컴포넌트를 사용하고 있던 중에 문제를 발견했다.
(물론 알고보니 내 잘못이었다^^)
모달창을 켜서 체크박스를 체크한 뒤 저장하지 않고 모달을 닫은 다음, 다시 모달창을 열면 내가 만든 state의 checked의 상태는 false로 바뀌어있지만 스타일링은 그대로 true처럼 남아있는 상태였다. 물론 실질적인 상태는 checkbox false임.
선배들에게 물어봤더니 checkbox에는 기본적으로 checked라는 속성이 있는데 내가 이걸 사용하지 않고 state로만 컨트롤 해서 일어난 문제라고 했다.
이 checked 속성을 쓰지 않으면 맨 마지막으로 있던 상태를 기본적으로 가지고 있게 된다고 한다.
즉, 나는 모달창을 닫기 전의 상태가 true였으니까 모달창을 닫아도 checkbox는 계속 true의 스타일링을 유지하는 것이었다.
반면에 checkbox가 아닌 글씨인 div쪽은 상태로 관리되니까 잘 동작하는 것이었다.
- 체크박스 false
- 체크박스 true
코드 일부는 대충 이렇게 되어 있다.
<CollapseBox
defaultActiveKey={['1']}
expandIconPosition="end"
collapsible="icon"
expandIcon={() => <div className="expand-icon">{collapseKey ? '닫기' : '내용확인'}</div>}
onChange={onCollapseChange}
checkbox={checked}
>
<Panel
header={
<Checkbox className="checkbox-round" name="guide-checked" onChange={onCheckboxChange} checked={checked}>
안내사항을 확인하였습니다.
</Checkbox>
}
key="1"
> const onCheckboxChange = (e: CheckboxChangeEvent) => {
setState((v) => ({ ...v, checked: e.target.checked }));
};checkbox의 속성인 checked에 내가 state로 만든 checked를 넣었다.
그리고 이 checked의 상태는 체크박스를 클릭할 때마다 onCheckboxChange의 setState로 변경된다.
기본 속성이 괜히 있는 것이 아니로구나~!
