React에서의 체크박스와 Recoil 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 의 상태도 함께 바꿔줬다.
• 사용자가 체크박스를 클릭하는 순간에 카운트 상태가 늘거나 줄어야한다. 체크박스의 현재 체크 여부에 따라 카운트 상태를 늘리고 줄이는 것은 원래의 의도에 맞지 않다.

---

회고

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