data fetching

data fetching(react-query,suspense)

개요

react 에서 ui 컴포넌트가 api 데이터를 받아서 렌더링 하는경우 필연적으로 loading, error, result 세 상태에 대한 결과값으로 구성된다. 따라서 이러한 명령형적 코드를 조금더 선언형으로 만들기 위해서 해당 상태를 분리하여 작성할수 있도록 하기 위함

사용방식

기존에는 다음과 아래 코드와 같이 loading error 상태를 ui 컴포넌트에 조건부로 분기하여 포함해 작성하였습니다.

const ComponentContainer = () => {
  const { data, isLoading, error } = useQuery(queryKey, queryFn);
  return <Component data={data} isLoading={isLoading} error={error}/>
}

const Component = ({isLoading, error, data}) => {
  if (isLoading) {
    return <div>로딩중</div>
  }
  if (error) {
    return <div>{error}</div>
  }
  return <div>{data}</div>
}

const App = () =>{
return <ComponentContainer/>
}

이러한 방식을 suspense 모드를 사용하여 분리하고 보다 계층적으로 관리할수 있게됩니다.

const ComponentContainer = () => {
const { data } = useQuery(queryKey, queryFn, { suspense: true });
return <Component data={data}/>
}

const Component = ({data}) => {
  return (
    <span>{data}</span>
  );
};

const ErrorFallback = ({ error, resetErrorBoundary }) => (
  <div>
    <p> 에러: {error.message} </p>
    <button onClick={() => resetErrorBoundary()}> 다시 시도 </button>
  </div>
);

const LoadingFallback = () => (
  <div>
    <p> 로딩중... </p>
  </div>
);

const App = () => (
  <ErrorBoundary FallbackComponent={ErrorFallback}>
    <Suspense fallback={LoadingFallback}>
      <ComponentContainer />
    </Suspense>
  </ErrorBoundary>
);

링크를 참고하시면 이보다 더 복잡한 사례를 다루는 코드가 있습니다. 위 코드는 저희가 사용할 폴더 컨벤션에 맞추어 약간 다르게 분리하여 재작성 한것입니다. 구체적인 사용방식은 링크를 참고하시면 됩니다.

참고링크

React Query와 함께 Concurrent UI Pattern을 도입하는 방법