[React] react에서 axios로 API 사용하기

🫡 요즘 API 사용하는 걸 연습하는 중인데 정리해보면 좋을 거 같아서 작성해봅니다!

📌 axios부터 설치해주자!

npm install axios

제일 먼저 터미널을 열고 axios를 설치해줍니당

위 사진과 같이 package.json 파일에 적혀있다면 성공~!

📌 사용할 API 주소들을 모아둘 폴더 만들기

저는 API를 한 곳에 모아두고 사용하고 싶어서 따로 src 폴더 안에 Service 폴더를 만들어 API 파일을 만들어주었습니당 이렇게 모아두면 API 확인하기가 쉽더라구요!

📌 ProductAPI.js

// ProductAPI.js
import axios from "axios"

export const HappyAPI = async () => {

  const HappyURL = `{사용할 API 주소}`
  const reponse = await axios.get(HappyURL)
  return reponse
}

함수로 만들어서 각각 export 해주는 방식으로 진행했습니다!

📌 만들었다면 사용하자!

const [happy, setHappy] = useState({})

  useEffect(() => {
    (async () => {
      const happy = await HappyAPI()
      setHappy(happy)
    })()
  }, [])

만들어뒀던 함수를 import 해와서 async/await 해주면 끝입니다!!!
console.log()로 찍어보면서 필요한 정보를 찾아서 사용하면 됩니다!