[React] Warning: Cannot update a component (`RouterProvider`) while rendering a different component (`ProtectedRoute`).

Cannot update a component (RouterProvider) while rendering a different component (ProtectedRoute). To locate the bad setState() call inside ProtectedRoute, follow the stack trace as described in https://reactjs.org/link/setstate-in-render

발생상황

권한이 없으면 사용 불가능한 페이지를 만들기 위해 ProtectedRouter 컴포넌트로 실제 렌더링 될 페이지를 감쌌고, ProtectedRouter에서는 사용자의 권한을 판단해서 접근 권한이 없을 경우
useNavigate를 이용해서 / URL로 리다이렉트되게 하려고 했다.

근데 리다이렉트 기능은 정상 동작하지만 콘솔창에 Warning발생함;;

원인

사실 정확한 원인을 찾진 못하고 추정중이다..
스택오버플로우를 엄청 뒤져봤는데 추정되는 원인은 두가지였다.

1. 페이지 렌더링이 완료되기 전에 navigate를 호출해서
2. side-effect 코드인데 useEffect외부에서 처리해서

2번 내용 관련해서는 React v16 이상인가? 부터 이 경고를 발생시키게 됐다는 글을 봤는데 그게 2년 전 글인데다 난 v18 사용중이라... 아직까지 저게 원인일지는 확신할수가 없다.

해결

useEffect내부에서 처리했더니 아무런 경고도 발생하지 않음. (2번 원인이 맞을거같기도)