React 컴포넌트 트리에서 API 데이터 전달: props vs 상태 관리 라이브러리

React에서 데이터 흐름을 설계할 때 흔히 마주치는 두 가지 방식이 있습니다:

1. 최상위 컴포넌트에 중앙 훅을 두고 props로 데이터 전달
2. 전역 상태 관리 라이브러리(Redux, Zustand 등)를 활용해 하위 컴포넌트에서 직접 접근

각 방식은 상황에 따라 장단점이 분명하게 나뉘며, 이를 잘 이해하고 선택하는 것이 중요합니다.

실제로 제가 진행했던 프로젝트에서도 해당 주제로 고민이 되었던 순간이 있었는데 정답은 없는 것 같습니다. 마지막에 얘기할 결론에 따라 적절하게 판단, 적용 하는 것이 중요하다고 생각합니다.

---

✅ 방식 1: 최상위 컴포넌트에서 API 호출 → props로 하위에 전달

구조 예시

function App() {
  const { data, isLoading } = useQuery(['posts'], fetchPosts);

  return <PostList data={data} isLoading={isLoading} />;
}

function PostList({ data, isLoading }) {
  if (isLoading) return <p>Loading...</p>;
  return (
    <ul>
      {data.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

설명

• useQuery 같은 훅을 최상위 컴포넌트에서 실행하고 결과를 props로 넘깁니다.
• 계층 구조가 깊을 경우 props drilling이 발생할 수 있습니다.

장점

• 구조가 명시적이고 추적이 쉬움
• 외부 도구에 의존하지 않고 React 자체 기능만으로 구현 가능

주의점

• 트리 깊이가 깊어질수록 props 전달이 번거로움
• 중간 컴포넌트가 데이터에 관심 없어도 props를 계속 이어줘야 함

💡 중간 전달 컴포넌트가 많아질 경우 Context API와의 병용도 고려할 수 있습니다.

---

✅ 방식 2: 상태 관리 라이브러리 사용 (Redux, Zustand 등)

구조 예시 (Redux 기준)

// store.ts
const postSlice = createSlice({
  name: 'post',
  initialState: { data: [], isLoading: false },
  reducers: { setPosts: (state, action) => { state.data = action.payload; } },
});

export const { setPosts } = postSlice.actions;
export default postSlice.reducer;

// 컴포넌트 내부
function PostList() {
  const dispatch = useDispatch();
  const data = useSelector((state) => state.post.data);

  useEffect(() => {
    dispatch(fetchPostsAsync());
  }, []);

  return <ul>{data.map((post) => <li key={post.id}>{post.title}</li>)}</ul>;
}

설명

• 데이터는 전역 store에 저장되고, 하위 컴포넌트 어디서든 useSelector로 접근합니다.
• props 전달 없이 필요한 위치에서 바로 사용 가능

장점

• props drilling이 완전히 사라짐
• 여러 컴포넌트에서 공통 데이터 사용이 편리
• 전역 상태, 캐싱, 비동기 처리 로직 분리 등 확장성 확보

주의점

• 초기 셋업이 복잡할 수 있고 러닝 커브가 존재
• 작은 프로젝트에서는 과도한 설계일 수 있음

⚠️ 과한 상태 공유는 오히려 유지보수를 어렵게 할 수 있으니, 필요한 경우에만 도입하는 것이 좋습니다.

---

📌 결론: 언제 어떤 방식을 써야 할까?

상황	추천 방식
컴포넌트 구조가 얕고 명확한 경우	props 기반 전달
여러 컴포넌트에서 동일한 데이터를 참조해야 하는 경우	전역 상태 관리 도입
빠른 시제품 또는 기능 단위 개발	props + Context API
대규모 프로젝트에서 상태 간 복잡한 관계가 있는 경우	Redux, Zustand 등

---

✅ 한 줄 요약

• 간단한 프로젝트: props로도 충분합니다.
• 복잡한 프로젝트: 상태 관리 도구가 필요합니다.
• 공통 상태가 많은가? → 전역 관리 고려해보세요.