React에서 Axios를 사용한 REST API 호출과 데이터 처리

React 애플리케이션에서 외부 REST API와 통신하고 데이터를 받아와 화면에 표시하는 일은 아주 흔한 과제입니다. Axios는 이 작업을 간편하게 해주는 인기 있는 HTTP 클라이언트 라이브러리입니다. 이번 글에서는 Axios를 React와 함께 사용하여 API를 호출하고 데이터를 화면에 표시하는 전체 과정을 단계별로 살펴보겠습니다.

1. 프로젝트 설정

우선, React 애플리케이션을 설정하고 Axios를 설치해야 합니다. 여기서는 create-react-app을 사용하여 새로운 React 프로젝트를 생성한 후 Axios를 설치하는 방법을 설명합니다.

bash
npx create-react-app my-app
cd my-app
npm install axios

위 명령어를 실행하면 새로운 React 프로젝트가 생성되고, Axios 라이브러리가 설치됩니다.

2. API 호출 설정

이제 API를 호출하는 코드를 작성해보겠습니다. 이를 위해 useEffect와 useState 훅을 사용하여 컴포넌트가 마운트될 때 API를 호출하고, 그 결과를 상태에 저장하도록 합니다.

jsx
import React, { useEffect, useState } from 'react';
import axios from 'axios';

const DataFetchingComponent = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get('https://api.example.com/data');
        setData(response.data);
        setLoading(false);
      } catch (error) {
        setError(error);
        setLoading(false);
      }
    };
    fetchData();
  }, []);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <div>
      <h1>Data fetched from API</h1>
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default DataFetchingComponent;

여기서 useEffect 훅으로 컴포넌트가 마운트될 때 API를 호출합니다. axios.get 메서드를 사용하여 데이터를 요청하고, 성공적으로 데이터를 받아오면 이를 setData로 상태에 저장합니다. 오류가 발생할 경우 setError로 오류를 상태에 저장합니다.

3. 데이터 로딩 및 오류 처리

데이터를 호출하는 동안 로딩 상태를 표시하고, 오류가 발생하면 이를 사용자에게 표시하는 것도 중요합니다. 위 코드처럼 데이터를 요청하는 동안 loading 상태를 true로 설정하고, 데이터가 응답된 후에는 loading 상태를 false로 변경합니다. 오류가 발생하면 error 상태를 설정하고, 이를 UI에 표시합니다.

4. 데이터 표시

데이터가 성공적으로 로드되면 이를 화면에 표시합니다. 위 코드에서는 간단한 리스트로 데이터를 표현합니다. 각 항목에 대해 map 메서드를 사용하여 배열을 순회하고, 각 항목을 <li> 태그로 렌더링합니다.

이제 DataFetchingComponent를 애플리케이션의 다른 부분에서 사용할 수 있습니다.

jsx
import React from 'react';
import ReactDOM from 'react-dom';
import DataFetchingComponent from './DataFetchingComponent';

ReactDOM.render(
  <React.StrictMode>
    <DataFetchingComponent />
  </React.StrictMode>,
  document.getElementById('root')
);

다음과 같이 index.js 파일에 DataFetchingComponent를 임포트하여 ReactDOM의 render 메서드를 통해 렌더링할 수 있습니다.

5. 추가적인 기능

실제 애플리케이션에서는 데이터 필터링, 페이징, 소팅 같은 추가 기능들이 필요하게 됩니다. 이러한 기능들을 추가하여 API 데이터를 더 유연하게 다룰 수 있습니다.

필터링 예시

데이터 필터링 기능을 추가하기 위해 useState 훅을 사용하여 필터 상태를 관리합니다. 사용자의 입력을 받아 필터링된 데이터를 표시합니다.

jsx
const DataFetchingComponent = () => {
  // ...기존 코드...
  const [filter, setFilter] = useState('');
  const filteredData = data.filter(item => item.name.includes(filter));

  return (
    <div>
      <h1>Data fetched from API</h1>
      <input
        type="text"
        value={filter}
        onChange={e => setFilter(e.target.value)}
        placeholder="Filter by name"
      />
      <ul>
        {filteredData.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};

페이지 네이션 예시

간단한 페이지 네이션 기능도 추가할 수 있습니다. 페이지별로 데이터를 나누어 렌더링하고 페이지 번호를 관리합니다.

jsx
const DataFetchingComponent = () => {
  // ...기존 코드...
  const [currentPage, setCurrentPage] = useState(1);
  const itemsPerPage = 10;
  const startIndex = (currentPage - 1) * itemsPerPage;
  const paginatedData = data.slice(startIndex, startIndex + itemsPerPage);

  return (
    <div>
      <h1>Data fetched from API</h1>
      <ul>
        {paginatedData.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
      <button onClick={() => setCurrentPage(currentPage - 1)} disabled={currentPage === 1}>
        Previous
      </button>
      <button onClick={() => setCurrentPage(currentPage + 1)} disabled={startIndex + itemsPerPage >= data.length}>
        Next
      </button>
    </div>
  );
};

이와 같이, React와 Axios를 사용하여 API 데이터를 가져오고 다양한 방식으로 이를 화면에 표시할 수 있습니다. 이러한 기술들을 결합하여 유연하고 반응성이 좋은 사용자 인터페이스를 구축할 수 있습니다.