cannot-flush-updates-when-react-is-already-rendering

생성일

Dec 13, 2021 05:31 PM

태그

React

작성자

해결 완료

🔥 문제

업로드 기능을 구현하는데, 버튼을 클릭했을 때 해당 오류가 발생하였다.

해당 오류가 나오면서 무한 렌더링이 발생했고, 결과적으로 마운트 자체가 불가했다.

이에 대한 이유를 찾아보려고 노력했으나... 제대로 찾지 못하여 2시간을 날렸다.

과연 이유가 무엇일까?


cannot-flush-updates-when-react-is-already-rendering

원인은 라이프사이클에서의 문제 발생이었다.

리액트에서는 가능한 DOM 조작을 직접 하지 말라고 권장한다. 그 이유는, 리액트와 별도로 독립적인 DOM 조작을 할 경우, 라이프사이클에서의 로직 관리를 받을 수 없기에 Side Effect가 심해지기 때문이다.

그렇지만 나는 직접적으로 DOM을 조작한 적이 없다.

그렇다면 이럴 때 가장 확실한 방법은, 어떤 로직을 실행했느냐이다.

나는 버튼을 클릭했다. 그렇다면, 버튼을 클릭했을 때 → DOM 조작을 직접적으로 하였는지를 살펴보면 된다.

그 결과... 원인은 다음에 있었다.


<Button ... onClick={handleButtonClick(idx)}>
 + 사진 올리기
</Button>

이미 onClick을 하자마자, event를 호출하는 콜백 이전에 이벤트 핸들러를 실행해주는 어이없는 실수를 하고 말았던 것.

이를 () ⇒ handleButtonClick으로 해주니 놀랍게도 그냥 조작했다.

이 때문에 useEffect니 뭐니 다 수정했는데... 이유는 저 콜백 때문.

덕분에, 침착해야 함을 배울 수 있었다.

💡

아고... 다음에는 이런 어이 없는 실수하지 말자!