[React] fetch 요청할때 useEffect 유의할 점

영등포 솥돈 <- 여기 솥뚜껑 삼겹살 기가 막히게 해줌

백엔드분들과 여차저차 통신을 하려던 찰나에.. 나한테 되게 조심스럽게 말 한마디를 건내셨다.

요청이... 너무 많이 오는데요...?

네....?

최대한 당황한척하지 않고 아 ! 확인해볼게요 ! 하고 내 코드를 봤다. 당연히 API요청을 하는 부분은 useEffect 부분 밖에 없어서 뭐야 뭔 문제지 하면서 보던 찰나에 uesEffect 뒷부분이 굉장히 슴슴하게 비어있었다.

의존성 배열의 부재

의존성 배열이란 ?

의존성 배열은 useEffect 훅에 입력하는 두 번째 매개변수이다. 의존성 배열의 내용이 변경되었을 경우 부수 효과 함수가 실행된다. 내용이 변경되는 시점을 잘 이용하면 굉장히 효율적이지만 의존성 배열은 잘못 관리하면 쉽게 버그로 이어질 수도 있다. 자나깨나 버그 조심 !

그렇다면 ?

useEffect(() => {
    fetch(`소중한 API 주소❤️`)
      .then(res => res.json())
      .then(data => setState(data.dataSet));
  }, [여기다가 넣어줘야함 !!]);

저렇게 fetch로 데이터를 요청하게 되면 백엔드분들과 되게 민망한 상황에 마주하게 된다.
두현님... 요청 그만좀...
아... 네...

그렇기 때문에 의존성 배열에 API가 들어오게 되면 불러오는 시점을 작성해줘야한다 !!

의존성 배열을 써줘야할 상황과 안써줘도 될 상황을 잘 구별해서 백엔드 분들과 머쓱한 상황을 만들지 않도록 노력해보자 :)