상황

부모-자식 관계인 여러 컴포넌트에서 동일한 서버 데이터를 사용한다. react-query의 useQuery를 통해 데이터를 불러오려 할 때, 어떤 식으로 코드를 작성하는 것이 좋을까?

1. 최상위 컴포넌트에서 useQuery 호출 후 자식 컴포넌트의 props로 전달

최상위 컴포넌트에서 필요한 모든 데이터를 불러온 후, 자식 컴포넌트에게 차례로 props로 내려주는 방식이다.

export function GrandParent() {
	const user = useQuery(['user'], fetchUser);
	const score = useQuery(['score'], fetchScore);
	// ...
	return <Parent user={user} score={score} />
}

export function Parent({user, score}) {
	// ...
	return <Child score={score} />
}

export function Child({score}) {
	// ...
}

장점

• 컴포넌트 내 중복 코드를 줄일 수 있다.
  • 최상위 컴포넌트에서만 useQuery를 호출하고 그 아래 컴포넌트에서는 props로 받아오기만 하면 된다.
  • 또한 로딩 여부 표시 등 추가적인 로직이 필요한 경우 이를 최상위 컴포넌트에서 모두 처리하도록 할 수 있다.

단점

• props drilling 문제가 존재한다.
  • 하위 컴포넌트에서 사용하는 데이터를 위해 그 중간의 모든 컴포넌트들이 (데이터 사용 여부에 관계없이) 해당 데이터를 전달해 주어야 한다.
  • 만약 props 사용에 관한 명세가 변한다면 해당 props에 관여하는 모든 컴포넌트에 변경 사항을 반영해야 한다. (사이드 이펙트)
• 매번 props를 정의해야 한다.
  • 타입스크립트의 경우 컴포넌트의 props 타입을 사전에 정의해야 하며, 이 과정에서 코드 중복이 발생할 수 있다. (물론 타입을 공통으로 빼서 중복을 줄일 수는 있다)

2. 데이터가 필요한 컴포넌트에서 각자 useQuery 호출

react-query가 서버 상태를 전역 상태처럼 다룰 수 있다는 장점을 이용한 방법이다.

여러 컴포넌트에서 동시에 useQuery를 호출하더라도 실제 데이터 페칭은 1번만 이루어지므로 성능도 크게 문제가 되지 않는다.

export function GrandParent() {
	const user = useQuery(['user'], fetchUser);
	const score = useQuery(['score'], fetchScore);
	// ...
	return <Parent user={user} score={score} />
}

export function Parent() {
	const user = useQuery(['user'], fetchUser);
	// ...
	return <Child score={score} />
}

export function Child() {
	const score = useQuery(['score'], fetchScore);
	// ...
}

장점

• props를 컴포넌트마다 매번 정의하지 않아도 된다.
• 또한 props drilling 문제도 자연스럽게 해결된다.
  • 1번 방식처럼 컴포넌트가 직접 필요로 하지 않는 데이터(props)를 굳이 명시하지 않아도 된다.

단점

• 컴포넌트 내에 중복 코드가 발생한다.
  • 만약 단순히 쿼리 결과값만 필요한 것이 아니라 로딩이나 에러 여부, 또 이에 대한 처리 로직이 존재한다면 동일한 코드를 계속 작성해야 한다. (물론 이 부분도 따로 분리해서 중복을 줄일 수는 있다)

그런데 왜 useQuery를 여러 번 호출해도 괜찮을까?