📍 컴포넌트의 setState를 props로 전달하지 말아야 할 이유

✨ 인사이트
리액트 강의를 재수강하며 전체 개념들에 대해 복기하며 얻은 인사이트.
부모 컴포넌트의 setState를 자식 컴포넌트에 props로 그대로 전달하는 법에 대해 다시 한번 생각하는 계기가 되었다.

✅ 잊지 말자!
setState를 그대로 전달하는건 외부에 데이터 변경의 주도권을 넘겨주는 것과 같다.
그러므로 콜백함수로 감싸서 넘기고 자식 컴포넌트가 그것을 적절한 시점에 호출만 할 수 있도록 제어!그렇게 되면 호출하는 입장에서는 세부 로직을 알기 어려움

컴포넌트 내 데이터의 주도권을 그대로 지켜내면서, 컴포넌트 간의 협력

import { useState } from 'react';
import './App.css';
import Counter from './components/Counter';

export default function AppCounter() {
  const [count, setCount] = useState(0);
  const handleTotal = () => {
    setCount((prev) => prev + 1);
  }; // --> 해당 컴포넌트에서 제어권 통제
  return (
    <div className='container'>
      <span className='banner'>
        Total : {`${count} ${count > 10 ? '🔥' : '🪴'}`}
      </span>
      <div className='counters'>
        <Counter total={count} onClick={handleTotal} />
        <Counter total={count} onClick={handleTotal} />
      </div>
    </div>
  );
}

import React, { useState } from 'react';

export default function Counter({ total, onClick }) {
  const [count, setCount] = useState(0);
  const handleClick = () => {
    setCount((prev) => prev + 1);
    onClick(); // --> 콜백함수를 props로 전달
  };
  return (
    <div className='counter'>
      <p>
        <span className='number'>{count}</span>
        <small>/ {total}</small>
      </p>
      <button className='button' onClick={handleClick}>
        ADD
      </button>
    </div>
  );
}

💩 처음 작성했던 코드

export default function Counter({ total, setTotalCount }) {
  const [count, setCount] = useState(0);
  const handleClick = () => {
    setCount((prev) => prev + 1);
    setTotalCount((prev) => prev + 1); // setState를 바로 전달
  };