[React] Warning: Component update a component Bar while rendering a different component

발생 조건

• 특정 컴포넌트 렌더링 시 mobx 스토어의 값을 변경하도록 함
• 내 경우 /bar/edit 라우트로 접속 -> bar edit 화면 렌더링 -> 스토어의 menu 값을 'edit'으로 변경하는 상황이었음
• 해당 스토어 값을 통해 다른 UI를 보여줘야 해서 이렇게 구현하게 됨

발생 원인

• 렌더링 중 state가 변경되면 안됨. state 변경시 다시 렌더링이 일어나므로 당연한거였다...

해결 방법

컴포넌트 렌더링 시 store 또는 state 값 변경이 필요한 경우, useEffect 안에서 값을 변경한다.

useEffect(() => {
        menu.changeMenu(Menu.Edit); // 스토어의 값을 변경하는 코드(setState)
    }, []);