useEffect API 호출(데이터 가져오기)에서 setTimeOut.

useEffect로 API 데이터를 가져오는 것은 때때로 까다로울 수 있습니다. 이 기사에서는 useEffect를 사용하여 효율적인 데이터 가져오기를 위한 한 가지 요령을 살펴보겠습니다.

이 기사에서는 useEffect 후크 작동 방식을 이해하고 있다고 가정합니다. 그렇지 않은 경우 반응 문서를 방문하십시오.

시작할까요?

setTimeout

setTimeout은 다른 함수 또는 임의의 코드 스니펫을 가져와서 지정된 시간(밀리초) 후에 실행하는 자바스크립트 함수입니다.

setTimeout(
  console.log('You will get this in five seconds egghead.'), 
5000)

setTimeout 함수는 코드 실행 5초 후에 console.log() 함수를 실행합니다.

setTimeout(
  function Add(a, b){
   return 4+7;
},
3000)

여기에서 setTimeout 함수가 다른 함수를 사용할 수 있음을 알 수 있습니다. 이 경우 setTimeout 함수 내의 Add 함수는 코드 실행 후 3초 후에 실행됩니다.

그것은 setTimeout 함수가 어떻게 작동하는지 아주 많이 설명해야 합니다. 이제 useEffect로 데이터 가져오기에 어떻게 사용할 수 있는지 살펴보겠습니다.

UseEffect에서 데이터 가져오기

useEffect(() => {
    const fetchData = async () => {
      await fetch(`https://api.github.com/users/${input}`)
        .then((res) => res.json())
        .then((res) => setData([res]))
        .catch((e) => console.error(e));
    };

   fetchData();
  }, [input]);

위의 코드에서 볼 수 있듯이 사용자가 입력한 내용에 따라 github API에 요청이 전송됩니다. 하지만 API에 데이터를 요청하는 방식은 사용자가 검색값을 입력한다는 점에서 문제가 있다. 보여드리겠습니다!



위의 이미지를 잘 보면 네트워크에서 키를 누를 때마다 API에 대한 요청이 있는 것을 볼 수 있는데 이는 좋지 않습니다. 여러 요청이 API로 전송되고 있고 여러 응답도 있기 때문에 좋지 않습니다. 이는 모든 상태 변경에서 실행되는 useEffect 함수로 인해 발생합니다. 키누름이 있을 때마다 상태가 변경되고 상태가 변경될 때마다 useEffect가 실행된다는 점을 기억하십시오. 따라서 키보드를 누를 때마다 API에 대한 요청이 이루어집니다.

이 방법의 다른 두 가지 문제는 다음과 같습니다.

API에 대한 불필요하고 관련 없는 요청이 너무 많아 앱 속도가 느려지고 오류가 발생하기 쉽습니다.

사용자가 시간당 API에 요청할 수 있는 요청 수에는 항상 제한이 있습니다. 따라서 너무 많은 불필요한 요청이 허용된 API 요청의 지정된 수를 잡아먹기 때문에 API에서 얻을 수 있는 정확한 데이터의 수가 줄어듭니다.

글쎄, 우리는 분명히 그것을 원하지 않으므로 setTimeout을 사용하여 다중 요청 문제를 해결할 것입니다. 갑시다!

해결책

여러 개의 불필요한 요청 문제에 대한 해결책은 매우 간단합니다. setTimeout 함수에서 fetchData 함수를 래핑하여 이 문제를 해결할 수 있습니다.

useEffect(() => {
    const fetchData = async () => {
      await fetch(`https://api.github.com/users/${input}`)
        .then((res) => res.json())
        .then((res) => setData([res]))
        .catch((e) => console.error(e));
    };

    const timer = setTimeout(() => {
      fetchData();
    }, 5000);

    return () => clearTimeout(timer);
  }, [input]);

위의 코드에서 setTimeout 함수는 키를 누를 때마다 5초 동안 API에 전달되었을 모든 형태의 요청을 지연시킵니다. 이것은 사용자가 검색 값을 완전히 입력할 수 있는 충분한 시간을 제공합니다. 키를 누르지 않고 5초 후에 요청이 이루어집니다. 키를 누를 때마다 API에 여러 요청을 보내지 않기 때문에 실제로 더 좋습니다.



setTimeout을 사용하면 API에 대해 하나의 요청만 생성되고 하나의 정확한 응답만 얻는다는 것을 알 수 있습니다. 이 간단한 방법은 관련 없는 여러 요청으로 네트워크에 과부하를 주지 않기 때문에 앱의 속도와 성능도 향상시킬 수 있습니다.

그렇게 말하면 불필요한 요청과 응답을 피하기 위해 요청에 입력 값이 포함될 때 다음 API 호출에서 setTimeout을 사용할 것이라고 믿고 싶습니다. 행운을 빕니다!