[reactjs/nextjs] cannot update a component (`MyApp`) while rendering a different component (`AuthticatedComponent`).

annot update a component (`MyApp`) while rendering a different component (`AuthticatedComponent`). 
에러(경고) 발생

 

 

문제 원인

위와 같은 에러(경고)가 발생했다. 이는 useState를 변경하는 부분이 useEffect나 이벤트리스터에 의한 변화가 아닌 로직내부에 들어있어서 나는 에러이다. 즉, react는 props나 상태 변화에 따라 여러번 re-render를 한다. 그리고 개발단계에서는 re-render를 통해서 변화를 확인하기도 한다. 

 

 

해결책

간단히 useEffect 내부에 넣어주면된다. 직관적으로 쉽게 예를 들겠다.

 

const Test = (prop) => {
    const [data, setData] = useState('')
    if (prop.flag){
        setData('변경변경')
    }
    return (
        <>
            ...
        </>
    )
}

export default Test;

 

위의 코드의 문제는 렌더가 되는 도중에 setData에 의해 데이터 변경이 일어난다는 것이다. 이를 방지하기 위해 useEffect() 내부에 넣어주어야 한다. 애래와 같이 적으면 해결된다.

 

const Test = (prop) => {
    const [data, setData] = useState('')
    useEffect(()=> {
        if (prop.flag){
            setData('변경변경')
        }
    }, [prop.flag])
    return (
        <>
            ...
        </>
    )
}

export default Test;

 

혹시나 위의 로직이 어렵다면, 아래의 내용들을 참고하자.

 

[react web] Hook 기초_useState

[react web] Hook 기초_useEffect