Trouble shooting 일지 - 광고 플랫폼 app 편 #1
< 목표 >
recoil을 사용해서 만든 여러 프로젝트에서 동일하게 발생한 에러의 원인을 찾고 이것을 해결해서 애플리케이션 정상 작동하게 만들기
< 첫번째 에러 >
Warning : 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.
< 두번째 에러 >
Uncaught Error : 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.
< 에러로 인한 현상 >
A와 B라는 2개의 페이지로 이루어진 SPA 애플리케이션이 있다고 가정하면,
(1) A 페이지 렌더링시 정상적으로 렌더링되지만 콘솔에 1번의 에러 내용이 찍힘.
(2) 이 상태에서 라우터로 B 페이지로 이동하면 콘솔에 2번의 에러 내용이 찍히면서 B 페이지 렌더링 실패.
(3) (2)에서 페이지 리로드(새로고침)시 B 페이지가 다시 정상적으로 렌더링 되지만 1번의 에러 내용이 콘솔에 또 찍힘.
(4) 이후에는 페이지를 이동을 할 때마다 (2)~(3)단계를 반복함.
=> 이 같은 에러가 광고 플랫폼 app 이외에 다른 2개의 프로젝트에서도 동일하게 발생하여 이 문제에 대해 정확하게 알고 넘어가기 위해 차근차근 공부하면서 코드를 수정해 나가려고 함.
< 에러의 의미 추측 >
첫번째 에러 : https://deok2kim.tistory.com/400?category=932946 를 참고해보면 첫 문장은 컴포넌트가 마운트 되기 전에 state를 업데이트하려고 했다는 뜻이 맞다. 그 뒤의 문장까지 합쳐서 생각해보면, "내가 만든 렌더링 함수가 사이드 이펙트(비동기적 동작? 콜백 함수?)를 발생시키는데, 이 사이드 이펙트가 (아직 마운트 되지 않은)컴포넌트를 업데이트 하고 있다" 는 내용같다.
두번째 에러 : 내용만 봤을 때 "무언가 동기적인 입력이 이루어지는 동안 컴포넌트가 중단되었고, 이것은 UI를 다른 로딩 내용으로 대체되게 한다. 이것을 고치려면 이 중단된 컴포넌트를 startTransition으로 감싸라" 이다. 정확한 내용은 모르겠지만, 확실한건 이동한 페이지가 어떠한 이유 때문에 렌더링이 중단되었다는 뜻인 것 같다. 그래서 페이지를 이동하면 정상적으로 렌더링되지 않은 듯하다.
< 공부해야되는 내용 >
- 처음에는 recoil을 다루는 것이 미숙해서 발생한 문제라고 생각했는데, 비동기 함수의 동작 원리에 대한 이해가 부족해서 생긴 문제가 아닐까로 바뀌었다.
- React v18에서 정식으로 지원된 Suspense와 startTransition에 대해서 공부해야할 것 같다.
다음 글은 '전역 상태 관리'에 대한 글이다.
