[React] axios (컴포넌트에서 API 호출하기 방법 2)

1. axios는 node.js와 브라우저를 위한, Promise기반 라이브러리이다

• JSON 데이터를 자동으로 변환해주기 때문에, fetch에서 사용해야했던 await result.json();을 할 필요 없다.
• 대신, fetch API는 내장되어 있기 때문에 따로 설치해줄 필요가 없지만, axios는 추가적으로 설치해야만 사용가능하다.
  
  

2. 기본 예시

import React from 'react';
import { Link, Outlet } from 'react-router-dom';
import { useEffect, useState } from 'react';
import axios from 'axios'; // 1번)

function ReactPage(props) {
  const [ docs, setDocs ] = useState([]); // 4번)

  useEffect(() => { // 2번)
    async function fetchData() {
      const result = await axios.get("https://jsonplaceholder.typicode.com/posts"); // (이 주소에 100개의 데이터가 들어있을때)
      console.log(result); // .json 하기전의 result 묶음 상태이다 (이렇게 사용 X)

      console.log(result.data); // 3번) 이런식으로 사용해야만, fetch API에서 toJson과 같은 결과를 낼 수 있다. // 결과가 100개의 데이터들

      setDocs(result.data); // 5번)
    }

    fetchData(); // 6번) 반드시 함수를 호출해야만 async함수가 실행되는 것 잊지말기!
  }, []);


  return (
    <div>
      { docs.map((doc) => ( // 7번) 결과로 100개의 doc의 title이 보인다
        // doc.id가 string이 아닐경우에는 to={ doc.id } 로 사용X -> to는 string을 받기때문에 -> 변수처리를 해주고 -> string으로 감싸준다
        <Link to={`${doc.id}`} key={ doc.id } style={{ display: 'block' }}>{ doc.title }</Link>
      )) }
      <Outlet />
    </div>
  );
}

export default ReactPage;

3. 만약 return을 사용해야 한다면?

useEffect(() => {
  async function fetchData() {
    const result = await axios.get("https://jsonplaceholder.typicode.com/posts"); // (이 주소에 100개의 데이터가 들어있을때)
    console.log(result); // .json 하기전의 result 묶음 상태이다 (이렇게 사용 X)

    console.log(result.data); // 이런식으로 사용해야만, fetch API에서 toJson과 같은 결과를 낼 수 있다. // 결과가 100개의 데이터들

    // setDocs(result.data); // 이것 대신
    return result.data; // 1번) async가 return하는 값은 promise 이기때문에
  }

  // fetchData(); // 이것 대신
  // 함수 호출 + .then사용해서 값 풀어주기
  fetchData().then((data) => { // 2번) .then으로, 값을 풀어줘서 사용해야한다!
    setDocs(data);
  })
}, []);