최종프로젝트

카테고리 조건부 렌더링

• Recoil로 비동기 사용하기

// atom.ts

export const mapCategorySelector = selector<any>({
  key: 'mapCategorySelector',
  get: async ({ get }) => {
    const category = get(mapCategoryValue);
    const data = await getPopupData();

    return data;
  },
});

만약 쿼리 해야하는 데이터가 데이터베이스에 저장되어 있었다면, Promise를 리턴하거나 혹은 async 함수를 사용하기만 하면 된다. 의존성에 하나라도 변경점이 생긴다면, selector는 새로운 쿼리를 재평가하고 다시 실행시킨다. 그리고 결과는 쿼리가 유니크한 인풋이 있을 때에만 실행되도록 캐시된다.

• 리코일에서 비동기 함수 호출을 하였는데 이런 에러가 발생하였다.

  Error : Can't perform a React state update on a component that hasn't mounted yet. This indicates that you have a side-effect in your render function that asynchronously later calls tries to update the component. Move this work to useEffect instead.

• 아직 탑재되지 않은 구성 요소에서 React 상태 업데이트를 수행할 수 없습니다. 라는 뜻으로 비동기 함수가 작동은 되지만 부작용이 있을수도 있다고 말해준다.
• index.tsx 에서 React.Suspense 컴포넌트를 감싸주고 fallback Props 로 비동기 함수가 끝나기 전 처리를 해주니 에러가 해결되었다.

// index.tsx

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement,
);
root.render(
  <RecoilRoot>
    <React.Suspense fallback={<div>Loading...</div>}>
      <QueryClientProvider client={queryClient}>
        <App />
      </QueryClientProvider>
    </React.Suspense>
  </RecoilRoot>,
);