setState를 props로 전달하려고 하는데 의견 부탁드려요.

자식 컴포넌트애서 setState를 통해 직전 상태를 핸들링 하여야 한다면 직접 props로 내려줘도 코드상으론 문제가 없다고 생각합니다. 그렇디 않다면 자식 컴포넌트에서 부모 컴포넌트의 상태를 변경해줘야 한다면, 부모 컴포넌트에서 함수를 선언한 후 선언한 함수를 props로 내려서 자식 컴포넌트에서 함수를 실행시킴으로써 상태를 변경하는건 어떨까요?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const Parent = () => {
  const [count, setCount] = useState(0);
  const handleCount = () => setCount(prev => prev+1);
  return (
    <Child onChangeCount={handleCount} />
  );
}

type ChildProps = {
  onChangeCount: () => void;
}

const Child = ({ onChangeCount }: ChildProps) => {
  return <button onClick={onChangeCount}>+</button>
}

etState를 props로 전달하는 것은 종종 사용되는 패턴입니다. 하지만 이 방식에는 몇 가지 주의해야 할 점이 있습니다. 1. 컴포넌트 간의 의존성: setState를 전달하면 하위 컴포넌트가 상위 컴포넌트의 상태를 변경하게 되어 두 컴포넌트 사이에 의존성이 생깁니다. 이로 인해 코드의 유지보수가 어려워질 수 있으며, 하위 컴포넌트를 독립적으로 사용하기 어려워집니다. 2. 코드 가독성: setState를 전달하면 코드 추적이 어려워지고 가독성이 떨어질 수 있습니다. 상태 변경이 여러 컴포넌트를 거쳐 발생하면 디버깅이 어려워집니다. 이런 문제를 피하려면, 다음과 같은 방법을 사용할 수 있습니다. 1. 콜백 함수 사용: 상위 컴포넌트에서 콜백 함수를 정의하고, 이를 하위 컴포넌트에 전달합니다. 이렇게 하면 상위 컴포넌트에서 상태를 관리할 수 있고, 하위 컴포넌트는 단순히 콜백 함수를 호출하여 상태를 변경할 수 있습니다. 2. 컨텍스트(Context) API 사용: 컨텍스트 API를 사용하면 컴포넌트 트리에서 명시적으로 props를 전달하지 않고도 상태를 공유할 수 있습니다. 이렇게 하면 컴포넌트 간의 의존성이 줄어들고 코드 가독성이 향상됩니다. 3. 상태 관리 라이브러리 사용: 전역 상태 관리 라이브러리(예: Redux, MobX, Recoil 등)를 사용하면 컴포넌트 간 상태 공유가 용이해집니다. 상태 관리 라이브러리를 사용하면 상태 변경 로직을 중앙 집중화하여 코드 가독성과 유지보수성을 높일 수 있습니다. 결론적으로, setState를 props로 전달하는 것은 합당한 방법이지만, 프로젝트의 규모와 상태 관리의 복잡성에 따라 다른 방법을 고려해야 할 수도 있습니다.