[Nextjs] Warning: Cannot update a component (`A`) while rendering a different component.. 해결하기

 

Warning: Cannot update a component (`A`) while rendering a different component (`B`).

To locate the bad setState() call inside `B`, follow.....

 

 와 같은 귀여운 에러 해결하기!

 

 일단 에러에 답이 있다. A의 상태를  B를 그리고 있던 중에 변경하려고 하면 에러가 난다! B에 적절하지 못한 setState() 있다고 주장하고 있다.나의 경우는 아래와 같았다.

 

위 같은 구조에서 B를 렌더링 할 때 B 쪽에서, 

조건에 따라 A 페이지의 setState() 값을 변경하는 부분이 들어있던것!! 

setState() 값을 변경하면 또 렌더링 되는 건 알고 있죠?!

B렌더링 중에 A의 값을 변경하면 A가 또다시 렌더링 되는....

듣기만 해도 벌써 WARNING이 가득해 보이죠?

 

 

해결 방법은 2가지라고 봅니다. 

1. A에서 해당 부분에 대한 계산을 미리 해서 최종값만 B로 보낸다.

2. B에서 렌더링이 된 이후에 useEffect 등 의 방식으로 값을 바꿔준다.

 

저는 첫 번째 방법으로 해결했습니다.

해당 조건을 A로 가지고 와서, 조건을 다 해결하고

필요한 값만 B에 넘겨줘서 렌더링 하게 끔 수정하였습니다!

 

각자의 컴포넌트 상황을 보고 해결하면 될 듯합니다!