react-query와 Recoil 통합하기: 세부 설정부터 렌더링까지

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      refetchOnWindowFocus: false,
      retry: 2,
      retryDelay: attempt => Math.min(attempt * 1000, 2000),
      staleTime: 1000 * 60 * 5,
      cacheTime: 1000 * 60 * 60,
    },
  },
});

• refetchOnWindowFocus: false: 창이 포커스될 때마다 데이터를 다시 가져오는 기능을 비활성화한다.
• retry: 2: 데이터 가져오기 쿼리가 실패할 경우 최대 2번까지 재시도한다.
• retryDelay: attempt => Math.min(attempt * 1000, 2000): 재시도 간격을 설정. 첫 번째 재시도는 1초 후, 두 번째 재시도는 2초 후에 한다.
• staleTime: 1000 * 60 * 5: 데이터를 5분 동안 신선한 상태로 간주한다. 이 시간 이후에는 데이터를 다시 가져올 수 있다.
• cacheTime: 1000 * 60 * 60: 성공적으로 가져온 데이터를 60분 동안 캐시에 유지한다.

root.render(
  <ConfigProvider
    locale={koKR}
    getPopupContainer={(triggerNode) => {
      const parentNode = triggerNode?.parentNode;
      if (parentNode instanceof HTMLDivElement && parentNode !== document.body) {
        return parentNode;
      } else {
        return document.body;
      }
    }}
  >
    <QueryClientProvider client={queryClient}>
      <RecoilRoot>
        <App />
      </RecoilRoot>
    </QueryClientProvider>
  </ConfigProvider>
);

• <ConfigProvider locale={koKR} ... >: antd (Ant Design) UI 라이브러리의 전역 설정을 제공한다. 여기서는 한국어로 로캘을 설정해준다.
• getPopupContainer={(triggerNode) => { ... }}: 팝업이 표시되는 위치를 결정하는 함수 특정 요소의 부모 노드가 HTMLDivElement이고 문서의 body가 아닐 경우 해당 부모 노드 내에 팝업을 표시하고, 그렇지 않으면 body에 표시함
• <QueryClientProvider client={queryClient}>: react-query의 설정을 React 컴포넌트에 제공합니다. 이 안에 있는 모든 컴포넌트들은 queryClient의 설정을 사용할 수 있습니다.
• <RecoilRoot>: recoil 상태 관리 라이브러리의 루트 컴포넌트. 이 안에 있는 컴포넌트들은 recoil의 상태와 기능을 사용할 수 있다.