[React] checkBox 기능 구현 시 setState 관련 이슈

checkBox 기능을 구현할 때, 체크박스의 onChange함수에서 호출한 checkHandler 함수에서 boolean type의 isChecked 상태를 setState 함수를 사용하여 변경해주고 이후 checkItemHandler 함수를 호출하여 isChecked의 값에 따라 적절하게 checked된 Item을 집합에 삽입하고 삭제하는 코드를 작성하였다.

 

문제는 chexkHandler 함수에서 setState가 동작하지 않는 것이였다.

 

원인을 찾아본 결과 setState 함수가 비동기적으로 처리되기 때문에 setState보다 checkItemHandler함수가 먼저 실행되어 기능이 정상적으로 동작하지 않았던 것이다. 

 

따라서 setState 함수를 동기적으로 처리 할 수 있는 방법이 필요했다.

 

checkHandler({ target }, id) {
  this.setState(
    (prevState) => ({
      ...prevState,
      isChecked: !prevState.isChecked,
    }),
    this.checkItemHandler(target.parentNode, id, target.checked)
  ) 
}

위 코드와 같이 prevState를 받아 상태 변경 작업을 해주고 ','로 구분하여 이후 작업을 처리함으로써 setState를 동기적으로 사용할 수 있었다.