[임시] useEffect로 프론트에서 효율적으로 데이터 호출하기

보통 데이터를 api를 통해 호출할 때, useEffect를 많이 사용합니다.

대부분 api를 호출 할 때 아래와 같이 사용할 것 입니다.

 

import "./App.css";
import { useState, useEffect } from "react";

function App() {
  const [count, setCount] = useState(0);
  const [result, setResult] = useState("");
  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/posts")
      .then((response) => response.json())
      .then((data) => {
        console.log(`${count + 1}번째 데이터: `, data[count]);
        setResult(data[count].title);
      });
  }, [count]);

  return (
    <div className="App">
      <h6>current count {count}</h6>
      <h6>{result}</h6>
      <button onClick={() => setCount(count + 1)}>증가!</button>
    </div>
  );
}

export default App;

 

위에 코드는 실제로 동작하는데 문제 없는 코드입니다.

하지만 효율적인 데이터 요청을 하고 있는가?에 대답은 No입니다.

 

어떤 점이 문제인가요?

만약 증가! 버튼을 14회 빠르게 연속해서 눌렀다면,

위의 코드는 api를 14번 요청하게 됩니다.

상황에 따라 모든 변화를 보여주어야 할 수도 있지만, 

만약에 마지막 14번째 데이터만 필요하다면 불필요한 13회의 api의 요청을 한 것입니다.

 

 

그렇다면 어떻게 개선할 수 있나요?

불필요한 api호출을 줄일 수 있는 간단한 방법이 있습니다.

그것은 setTimeout 과 cleanup 함수를 이용하는 것입니다.

자신의 상황에 맞게 setTimeout 시간을 조절하여, 불필요한 호출줄여서 효율적인 호출을 할 수 있습니다.

 

// 개선 전
useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/posts")
      .then((response) => response.json())
      .then((data) => {
        console.log(`${count + 1}번째 데이터: `, data[count]);
        setResult(data[count].title);
      });
  }, [count]);



// 개선 후
useEffect(() => {
    const timeout = setTimeout(() => {
      fetch("https://jsonplaceholder.typicode.com/posts")
        .then((response) => response.json())
        .then((data) => {
          console.log(`${count + 1}번째 데이터: `, data[count]);
          setResult(data[count].title);
        });
    }, 5000);
    return () => {
      clearTimeout(timeout);
    };
  }, [count]);

 

이렇게 하면 내가 증가 버튼을 누른 뒤에 n초 뒤에 요청을 하여 효율적인 api 요청을 할 수 있습니다.

 

결론

사실 무조건적으로 효율적인 api 호출이 답이 아닐 수 있습니다.

예를 들어 빠른 검색 추천을 위해서 한글자 한글자 검색할 때마다 api 요청을 하여 키워드 추천을 해줘야 한다면

효율적인 요청이 아니라, 매번 요청하는 게 좋을 것입니다.

 

본인의 앱/웹의 성향에 따라 호출 빈도를 적절히 조절하여 사용해봅시다!

 

 

 

참조:

https://stackoverflow.com/questions/70471250/settimeout-function-in-useeffect-outputs-a-cached-state-value

setTimeout function in useEffect outputs a cached state value