React - setState 자체를 props로 전달하지 말아야 하는 이유

자식 컴포넌트에서 부모 컴포넌트로의 변수 전달 or state 업데이트를 위해 이때까지 부모 컴포넌트에서 setState 자체를 전달하여 자식 컴포넌트에서 setState를 수정하곤 했다.

근데 이때 setState를 그대로 전달하면 자식 컴포넌트에게 외부 데이터 변경의 주도권을 넘겨주는 것과 같은 작동방식이다.

이를 해결하기 위해 setState를 콜백함수로 감싸서 넘기고, 자식 컴포넌트에서는 콜백함수를 필요한 부분에서 호출만 할 수 있게 하는 것이 건강한 로직이다.

(parent)
export default function AppCounter(props) {
  const [count, setCount] = useState(0);
  const handleClick = () => {
    setCount((prev) => prev + 1);
  };
  return (
    <div className="container">
      <div className="banner">
        Total Count: {count} {count < 10 ? "❤️‍🔥" : "❤️"}
      </div>
      <div className="counters">
        <Counter total={count} onClick={handleClick} />
        <Counter total={count} onClick={handleClick} />
      </div>
    </div>
  );
}

(child)
export default function Counter(props) {
  let { total, onClick } = props;
  const [num, setNum] = useState(0);

  return (
    <div className="counter">
      <span className="number">
        {num} <span className="total">/{total}</span>
      </span>
      <button
        className="button"
        onClick={() => {
          setNum((prev) => prev + 1);
          onClick();
        }}
      >
        Add +
      </button>
    </div>
  );
}

위 코드와 같이 부모 컴포넌트에서는 onClick 이라는 이름의 props로 handleClick 함수를 넘겨준다. 그러면 자식 컴포넌트에서 onClick을 실행시키면 부모 컴포넌트의 handleClick이 실행되고, count가 1 증가하게 된다.