[React] Cannot update a component ( ... ) while rendering a ...

프로젝트를 진행하면서 개발자 도구를 확인하니 위와 같은 오류가 있었다. 

화면이 렌더링되지 않는 것 같은 치명적인 문제는 없었지만 오류가 나왔으니 해결을 하려고 코드를 확인했다. 

 

확인해보니 state의 업데이트를 useEffect에서 하는 것이 아닌 if문을 사용해서 조건부로 컴포넌트 내부에서 실행해서 

발생한 문제였다. 

 

문제를 해결하기 위해서 해당 조건문을 useEffect 내에서 실행하니 오류는 사라졌다. 

예상하기론 if문을 사용하더라도 같은 조건인 상황에 여러번 리렌더링이 발생하면 그때마다 state가 변경되기 때문에

문제가 된다고 알려주는 것 같다!