[ NextJS ] Warning: Cannot update a component (``) while rendering a different component (`PostPage`). To locate the bad setState() call inside ``

next-dev.js?3515:20 Warning: Cannot update a component (`Side`) while rendering a different component (`Main`). To locate the bad setState() call inside `Main`, follow the stack trace as described in

 

NextJS를 작성중 위와 같은 에러가 발생했습니다.

Main을 렌더링하는 동안 Side를 업데이트할 수 없다는 내용 같습니다. 

:: 부모 컴포넌트가 렌더링 될 때, 부모 컴포넌트 안의 자식 컴포넌트에 상태 업데이트를 할당할 때 일어난다고 합니다.

( 이 에러의 이상한 점은 첫 렌더링에서는 버그가 발생하지 않고 라우터를 이동할 때 생겨서 당황했습니다. )

 

여러 글을 읽어보니 redux를 사용하기 위해 사용했던 useDispatch를 렌더링중에 실행되는 useMemo에서 호출해서 문제가 생겼던 것 같습니다.

그래서 문제점을 해결하기 위해 화면에 렌더링이 완료된 이후에 수행되는 useEffect를 사용을 했더니 문제점이 해결되었습니다.

 

/* 전 */
const dispatch = useAppDispatch();

const test = useMemo(() => dispatch(), [])

/* 후 */
const dispatch = useAppDispatch();

useEffect(() => {
    dispatch()
}, [])