📘 리액트 강의 11편 - Axios로 서버와 통신하고 API 연동하기

 

리액트 앱은 보통 서버와 REST API로 통신하며 데이터를 주고받습니다.
이번 시간에는 axios 라이브러리를 활용하여 서버에서 데이터를 불러오고, 상태에 반영하는 실전 API 연동 방법을 배웁니다.

---

1. Axios란?

• fetch보다 간단하고 직관적인 HTTP 요청 라이브러리
• JSON 자동 처리, 요청/응답 인터셉터, 에러 처리 등에 강함

---

2. 설치하기

npm install axios

---

3. 예제: 영화 API 호출 앱

우리는 무료 샘플 API인 OMDb API를 활용해
영화 검색 기능을 만들어 볼게요.

👉 OMDb API 키: https://www.omdbapi.com/?apikey=7035c60c&s=검색어

---

4. 코드 작성

---

📄 App.js

import { useState, useEffect } from "react";
import axios from "axios";

function App() {
  const [query, setQuery] = useState("Avengers");
  const [movies, setMovies] = useState([]);
  const [loading, setLoading] = useState(false);

  const fetchMovies = async () => {
    setLoading(true);
    try {
      const res = await axios.get(
        `https://www.omdbapi.com/?apikey=7035c60c&s=${query}`
      );
      setMovies(res.data.Search || []);
    } catch (err) {
      alert("영화 데이터를 불러오는데 실패했습니다.");
    }
    setLoading(false);
  };

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

  return (

🎬 영화 검색

setQuery(e.target.value)} /> {loading ? (

로딩 중...

) : (

{movies.map((movie) => (
• {movie.Title} ({movie.Year})
))}

)}

  );
}

export default App;

---

5. 기능 설명

항목 설명

axios.get()	API 요청 (GET 방식)
async/await	비동기 처리
useState	검색어, 영화목록, 로딩 상태 관리
useEffect	첫 로딩 시 자동 검색

---

6. 로딩 처리와 에러 처리

• loading 상태로 로딩 중 UI 표시
• try/catch로 API 실패 시 사용자에게 알림 제공

이런 기본적인 에러/로딩 UX는 실무에서도 매우 중요합니다!