(번역) #10: React Query as a State Manager

(번역) #10: React Query as a State Manager | highjoon-dev

// 비동기 상태 관리자

export const useTodos = () =>
  useQuery({ queryKey: ["todos"], queryFn: fetchTodos });

function ComponentOne() {
  const { data } = useTodos();
}

function ComponentTwo() {
  // ✅ ComponentOne과 정확히 동일한 데이터를 받을 것입니다.
  const { data } = useTodos();
}

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <ComponentOne />
      <ComponentTwo />
    </QueryClientProvider>
  );
}

// mounts-in-short-succession

function ComponentOne() {
  const { data } = useTodos();

  if (data) {
    // ⚠️ 데이터가 존재할 경우에만 조건적으로 마운트
    return <ComponentTwo />;
  }
  return <Loading />;
}

function ComponentTwo() {
  // ⚠️ 이어서 2번째 네트워크 요청이 이루어질 것입니다.
  const { data } = useTodos();
}

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <ComponentOne />
    </QueryClientProvider>
  );
}

// lazy-second-component

function ComponentOne() {
  const { data } = useTodos();
  const [showMore, toggleShowMore] = React.useReducer((value) => !value, false);

  // 맞아요. 에러 핸들링을 제외했습니다.이건 그냥 예시입니다.
  if (!data) {
    return <Loading />;
  }

  return (
    <div>
      Todo count: {data.length}
      <button onClick={toggleShowMore}>Show More</button>
      // ✅ show ComponentTwo after the button has been clicked
      {showMore ? <ComponentTwo /> : null}
    </div>
  );
}

// setQueryDefaults

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      // ✅ 기본값은 전역적으로 20초로 설정되었습니다.
      staleTime: 1000 * 20,
    },
  },
});

// 🚀 할 일과 관련된 모든 것은
// 1분의 staleTime을 가질 것입니다.
queryClient.setQueryDefaults(todoKeys.all, { staleTime: 1000 * 60 });

(번역) #10: React Query as a State Manager

본문

비동기 상태 관리자 (An Async State Manager)

데이터 동기화 도구 (A data synchronization tool)

React Query 등장 이전 (Before React Query)

오래된 데이터를 사용하면서 다시 불러오기 (Stale While Revalidate)

데이터를 똑똑하게 다시 불러오기 (Smart refetches)

Recact Query가 마법을 부리게 하기 (Letting React Query do its magic)

staleTime을 커스터마이징 하기 (Customize staleTime)

보너스: setQueryDetails 사용하기 (Bonus: using setQueryDefaults)

관심사의 분리에 대한 주의사항 (A note on separation of concerns)

결론 (Takeaways)