[2024.07.03] Suspense 렌더링 시점

기존 PokemonList의 로딩 상태를 해당 컴포넌트 내에서 처리하는 게 아닌, 컴포넌트에서는 성공한 사례만 남기고 로딩이나 에러는 외부로 위임하기 위해 분리작업 중에 suspense를 사용하는데 도저히 작동하지 않는다...

기존 PokemonList(클라이언트 컴포넌트)

많은 고민의 흔적들...

새벽 4시가 넘어서야 원인을 찾았다(하루 종일 구글링만...)

 

<Suspense>의 동작시점

Suspense는 컴포넌트 렌더링 시점에 작동하는데, useEffect는 컴포넌트 마운트 시점에 동작한다. 때문에 useEffect 내에서 fetch가 이미 다 이루어졌기 때문에 Suspense가 이를 감지하지 못했던 것이었다. 드디어 원인을 알았으니 내일은 해결방법을 모색해서 꼭 해결되면 좋겠다. 더불어 공부하면 할수록 React 생명주기에 대한 공부가 더 필요하단걸 절실히 체감중인데, 최종 프로젝트 전에 시간 내서 해당 부분 다시 한 번 되짚어 봐야겠다.

 

✨ 내일 할 일 ✨

1. Suspense 처리

2. ErrorBoundary 공부해보기

3. PokemonList에 무한 스크롤 적용

4. 상세페이지마다 다른 metadata 추가하기

5. PokemonList 캐싱처리