[React] Too many re-renders

Hook 함수 공부 중 위와 같은 에러 메세지를 접하고
'반복문을 쓰지 않았는데 왜 무한 루프 문제가 생겼지?'라는 고민을 했다.

처음에는 main의 index.js에 너무 많은 컴포넌트들을 넣어서 그런가 싶어서
하나만 남기고 다 삭제할까 고민하다가
넷플릭스랑 디스코드도 버티는 React가 고작 이 정도를 가지고..?
라는 생각이 들어서 구글링을 해 본 결과..

문제가 된 부분은

<button onClick={setState(!state)}>UPDATE</button>

이 부분이었다.

렌더링을 하는 과정에서,
state를 변경시키는 함수가 있다면
setState라는 callback function이 다시 렌더링을 발생시키기 때문에
반복해서 리렌더링 과정을 거치게 된다.

오류가 나서 보이진 않지만
위와 같은 방식으로 코드를 작성하면
원래 의도대로 버튼이 눌릴때만 state에 변화가 생기는 것이 아니라
렌더링 → setState로 state 변경 → state에 변화가 생겼으므로 해당 컴포넌트가 다시 렌더링 → ...
의 과정을 반복하는 무한 루프에 빠지게 되는 것으로 보인다.

해결 방법은

<button onClick={() => {setToggle(!toggle)}}>UPDATE</button>

setState를 함수를 화살표 함수로 감싸주기만 하면 된다.
이제 이 코드는 사용자가 버튼을 클릭할 때만 실행될 것이다.

References
링크텍스트