[axios] 비동기적으로 API 데이터 가져오기

 

 

  const [docs, setDocs] = useState([]);

  const fetchDocs = async () => {
    const result = await axios.get(
      "https://jsonplaceholder.typicode.com/posts"
    );
    console.log(result.data);
    setDocs(result.data);
  };

  useEffect(() => {
    fetchDocs();
  }, []);

1. fetchDocs라는 비동기 함수를 정의한다. 이 함수는 axios를 사용하여 외부 API로 GET 요청을 보내고, 반환된 데이터를 result 변수에 저장한다.
2. setDocs(result.data)를 호출하여 docs 상태를 업데이트 한다. 이로써 API에서 받아온 데이터가 docs 상태에 저장된다.
3. useEffect 훅을 사용하여 컴포넌트가 렌더링되고 나서 최초로 한 번 fetchDocs 함수를 호출한다. 두 번째 매개변수로 빈 배열을 전달하므로, fetchDocs는 컴포넌트가 처음 마운트될 때에만 실행되고, 그 이후에는 실행되지 않는다.