[React]Cannot update a component (`Header`) while rendering a different component (`StorePage`). To locate the bad setState() call inside `StorePage`, follow the stack trace as described in 오류

리액트로 개발하던 도중

Cannot update a component (Header) while rendering a different component (StorePage). To locate the bad setState() call inside StorePage, follow the stack trace as described in

라는 에러를 만났다. 처음 보는 에러라 구글링 해 본 결과,
dispatch라는 녀석을 useEffect안에 넣어주지 않아서 그랬다고 한다.
React 규칙에 dispatch는 useEffect 안에 써줘야 하는게 규칙이라고 한다. 오호

• 렌더링하는 동안 setState를 사용하면 안 됩니다. 수업은 항상 이것에 대해 경고했습니다.
• 해당 함수 구성 요소 본문은 본질적으로 클래스 구성 요소 렌더링 메서드와 동일합니다

설명대로 useEffect로 dispatch를 감싸주니 에러가 사라졌다.
해결!

출처
https://velog.io/@kbs2082/ReactCannot-update-a-component-Header-while-rendering-a-different-component-StorePage.-To-locate-the-bad-setState-call-inside-StorePage-follow-the-stack-trace-as-described-in-%EC%98%A4%EB%A5%98