리액트에서 데이터 패칭: useQuery vs. Props 전달

React 애플리케이션을 개발하다 보면, 하위 컴포넌트에 데이터를 전달하는 방법에 대해 고민하게 된다.
예를 들어, 상위 컴포넌트(A)와 그 하위 컴포넌트(A-1)가 있을 때, A-1 컴포넌트가 필요한 데이터를 어떻게 가져와야 할까? 여기에는 크게 두 가지 방법이 있다:

1. 상위 컴포넌트(A)에서 데이터를 패칭한 후, props로 A-1에 전달

2. 하위 컴포넌트(A-1)에서 useQuery를 사용해 데이터를 직접 패칭

1. Props로 데이터 전달하기

이 방법은 상위 컴포넌트에서 데이터를 한 번만 패칭하고, 그 데이터를 하위 컴포넌트로 전달하는 방식이다.

• 장점
  • 네트워크 요청 최소화:
    데이터를 한 번만 가져오고 여러 컴포넌트에서 재사용하므로, 추가적인 네트워크 요청이 발생하지 않는다. 즉, 더 적은 리소스를 사용하게 된다.
  • 일관성 유지:
    모든 컴포넌트가 동일한 데이터를 참조하므로, 데이터가 일관되게 유지된다.

• 단점
  • 컴포넌트 간 결합도 증가:
    데이터를 계속해서 props로 전달해야 하므로, 컴포넌트 간의 의존성이 높아질 수 있다.

2. 하위 컴포넌트에서 useQuery 사용하기

이 방법은 하위 컴포넌트에서 직접 useQuery를 사용해 필요한 데이터를 패칭하는 방식이다.

• 장점
  • 독립성:
    각 컴포넌트가 독립적으로 데이터를 패칭하므로, 컴포넌트 간 의존성이 줄어든다. 컴포넌트를 재사용하거나 이동하기가 더 쉽다.
  • 간결한 코드:
    props로 데이터를 전달하지 않기 때문에 코드가 더 간단해질 수 있다.

• 단점
  • 리소스 사용 증가:
    각 컴포넌트가 데이터 패칭을 독립적으로 수행하므로, 네트워크 요청이 중복될 수 있다. 특히 컴포넌트가 자주 언마운트되었다가 다시 마운트되는 경우, 불필요한 데이터 요청이 많아져 자원을 더 소모할 수 있다.
  • 데이터 일관성 문제:
    여러 컴포넌트가 같은 데이터를 패칭할 때, 각각의 데이터가 서로 다른 시점에 갱신될 수 있어 일관성이 떨어질 수 있다.

언제 어떤 방법을 사용할까?

1. 데이터가 여러 컴포넌트에서 사용되고 일관성이 중요할 때:
   상위 컴포넌트에서 데이터를 패칭한 후 props로 전달하는 것이 좋다. 네트워크 요청도 줄고, 데이터 일관성도 보장된다.

2. 특정 컴포넌트가 독립적으로 동작해야 할 때:
   하위 컴포넌트에서 useQuery를 사용해 데이터를 직접 패칭하는 것이 더 유리하다. 컴포넌트 간 결합도를 낮추고, 재사용성을 높일 수 있다.

결론

데이터 패칭 방법을 선택할 때는 상황에 따라 적절한 방법을 선택하는 것이 중요하다. 네트워크 요청을 최소화하고 데이터 일관성을 유지하고 싶다면, 상위 컴포넌트에서 데이터를 패칭해 props로 전달하는 것이 좋다. 반면, 컴포넌트의 독립성과 재사용성이 더 중요하다면, 하위 컴포넌트에서 직접 useQuery를 사용하는 방법을 고려해 보는 것이 좋다.