리액트 429 에러 해결(useEffect 무한루프)

강의를 보면서 애플스토어 클론코딩을 진행하던 와중에 429 에러 rate-limited 를 보게되었다.

한 ip에서 서버에 요청이 과도하게 많아지면 그것을 제한하는 오류라고 한다. 시간이 지나면 해결되거나, 브라우저의 쿠키를 삭제하면 된다길래 적용했지만 계속해서 실패했다.

 

클레이풀 api를 사용중이었고 테스터플랜이었기 때문에 api 요청이 꽉찼나? 생각했지만 그것도 아니었다.

 

다른 페이지는 괜찮은데 장바구니 페이지에서만 오류가 나서 확인해보니,

 

장바구니 내역을 불러오는 useEffect에서 setState를 사용하는데 의존성 배열을 설정하지 않아서 

useEffect 실행 > setState 실행으로 state 변경 > useEffect 실행 ...

이렇게 무한 루프에 빠진 것이었다!

 

그래서 의존성배열로 빈 배열을 줘서 해결하였다. 

검색해보니 useEffect 무한루프에 대한 글이 꽤 보이는 걸보니 유명한 에러 중 하나였던 것 같다.

 

클레이풀 서버에서 rate-limited를 설정해두지 않았더라면... 브라우저가 죽었을 것이다... 휴..