[React.js] 부모컴포넌트와 상태(state) 공유에 대한 고민

3.13(월) 프로젝트 진행 중 다른 팀원들이 재사용이 가능한 Counter 컴포넌트를 구현하게 되었다. 카운터의 값을 부모 컴포넌트에서도 이용이 가능하게 구현 중 생기게 된 고민을 다룬 글입니다.

1. 부모 컴포넌트의 setState 함수를 자식 컴포넌트의 props로 전달해 부모 state를 update 해 이용하는 방법

export default function Counter({ setParentState = null }) {
  const [count, setCount] = useState(0);

  useEffect(() => {
    if (setParentState !== null) setParentState(count);
  }, [count]);

  const minusCount = () => {
    if (count === 0) {
      return;
    }
    setCount(count - 1);
  };

  const plusCount = () => {
    setCount(count + 1);
  };

  return (
    <>
      <CountButton onClick={minusCount}>-</CountButton>
      <Count>{count}</Count>
      <CountButton onClick={plusCount}>+</CountButton>
    </>
  );
}

설명: Counter 컴포넌트의 count state의 변화를 감지하는 useEffect 훅을 이용해, 부모 Component의 state를 update하는 방식의 구현 방식이다.

단점: 이는 괜찮은 방식 같지만 값이 변할 때마다 모든 요소들이 리렌더링 되는 단점이 있다.

고민해본 개선 방법: 상태관리 라이브러리인 Recoil을 이용하는 고차컴포넌트로 해결 가능하지 않을까..?