React에서의 체크박스, State

리액트에서 체크박스의 체크 여부에 따라 카운트 상태를 +1 Or -1 해줄 일이 있었다.

변경 전

const handleCheck = () => {
	setIsChecked(!isChecked);
}

return (
	<input type="checkbox" onChange={handleCheck} />
  )

useEffect(() => {
	isChecked ? 
         setSelectedIssues(selectedIssues + 1) :
         setSelectedIssues(selectedIssues - 1);
}, [isChecked]);

체크박스가 체크될 때마다 `isChecked`(boolean) 의 상태를 바꾸고,
useEffect는 `isChecked`를 지켜보다가 isChecked의 true/false에 따라
`SelectedIssues`(number) 의 상태를 +1 / -1 해주었었다.

 

문제는?

위 방법의 문제는 이 체크박스를 갖고 있는 컴포넌트(A-1)의 부모(A-0)에서도 Recoil State인 `selectedIssues` 를 사용하는 경우 A-0 컴포넌트 렌더링에 따라 A-1 컴포넌트가 리렌더링 되어 useEffect에서 `isChecked` 를 다시 읽는다는 점이다.
즉 A-1 컴포넌트가 맨 처음 렌더링 될 때, `selectedIssues` 의 값이 0 으로 들어오더라도 A-1 컴포넌트의 useEffect 에 의해 `selectedIssues`는 -1 로 세팅되어 버린다.

 

 

 

 

변경 후

const handleCheck = () => {
	setIsChecked(!isChecked);
	isChecked ? 
         setSelectedIssues(selectedIssues - 1) :
         setSelectedIssues(selectedIssues + 1);
};
};

return (
   <input type="checkbox" onChange={handleCheck} />
  )

체크박스의 onChange 이벤트인 `handleCheck` 함수 안에서 `isChecked` 의 상태 뿐만 아니라, `selectedIssues` 의 상태도 함께 바꿔줬다.
사용자가 체크박스를 클릭하는 순간에 카운트 상태가 늘거나 줄어야한다. 체크박스의 현재 체크 여부에 따라 카운트 상태를 늘리고 줄이는 것은 원래의 의도에 맞지 않다.

 

 

회고

기능 개발을 서둘러 하려다 보면 이처럼 단순한 로직 구현도 못하는 경우가 있다. 뭔가를 개발하기 전에 내가 무엇을 만들건지, 왜 이걸 만드는지, 어떻게 만들건지 이 세가지를 천천히 생각해보고 만들어보는 습관을 들이자.