🚫 에러
A component suspended while responding to synchronous input. This will cause the UI to be replaced with a loading indicator. To fix, updates that suspend should be wrapped with startTransition.
const data = useRecoilValue(fetchListState);위와같이 미리 선언된 selector를 사용하기 위해서 useRecoilValue를 통해 접근 할 시, 해당 에러가 발생했다.
비동기 처리 시 보여줄 fallback UI가 없다는 에러 메세지 였다.
🛠️ 해결
React.Suspense 사용
<RecoilRoot>
<Suspense fallback={<div>Loading...</div>}>
<Router>
<Wrapper>
<GlobalStyles />
<NavBar />
<ContentWrapper>
<Routes>
<Route path="/" element={<Main />} />
<Route path="/login" element={<Login />} />
<Route path="/join" element={<Join />} />
<Route path="/mypage" element={<Mypage />} />
<Route path="/exhibition" element={<Exhibition />} />
<Route path="/ex_detail/:id" element={<ExDetail />} />
<Route path="/community" element={<Community />} />
<Route path="/review_detail/:id" element={<ReviewDetail />} />
<Route path="/write" element={<Write />} />
</Routes>
</ContentWrapper>
<Footer />
</Wrapper>
</Router>
</Suspense>
</RecoilRoot>Suspense는 컴포넌트 내부에서 데이터를 가져오는 API 통신과 같은 비동기적 로직이 실행될 때, 해당 작업이 끝날 때까지 컴포넌트의 렌더링을 멈추는 역할을 한다. 또한 비동기 로딩 시 fallback으로 받은 컴포넌트를 사용자에게 보여줌으로써 비동기 처리 상태에 따라 사용자에게 보여줄 화면을 결정할 수 있다.
로딩화면
