React에서 데이터 가져오기: Axios와 useEffect를 사용하여 데이터 검색.

작성일 : 2024-06-30

React에서 데이터 가져오기: Axios와 useEffect를 사용하여 데이터 검색

개요

React는 사용자 인터페이스를 구축하는 데 매우 유용한 라이브러리입니다. 특히 기업용 응용 프로그램에서는 서버에서 데이터를 가져와 화면에 표시하는 일이 잦습니다. 이 글에서는 Axios라는 라이브러리를 사용하여 어떻게 데이터를 가져오고, useEffect 훅을 활용하여 비동기 처리를 효율적으로 구현하는지에 대해 알아보겠습니다.

Axios 소개

Axios는 브라우저와 Node.js에서 동작하는 HTTP 클라이언트로, 프로미스를 기반으로 합니다. 일반적으로 REST API와 상호 작용할 때 사용되며, 다양한 기능을 제공하여 데이터 요청을 쉽게 처리할 수 있습니다.

Axios의 주요 기능은 다음과 같습니다:

요청 및 응답 데이터의 변형
HTTP 요청 취소
XSRF 보호(크로스 사이트 요청 위조 방지)
클라이언트 측과 서버 측에서 동일한 코드로 동작

Axios를 설치하려면 터미널에서 다음 명령어를 실행합니다:


bash
npm install axios

useEffect 훅 개요

useEffect는 함수 컴포넌트에서 부수 효과(side effects)를 수행하기 위한 훅입니다. 주로 데이터 가져오기, 구독 설정, 수동으로 React 컴포넌트의 DOM을 조작해야 할 때 사용됩니다. useEffect는 컴포넌트가 렌더링된 후에 실행되며, 데이터 변경 시 다시 실행되어 최신 데이터를 유지할 수 있습니다.

기본 형태는 다음과 같습니다:


javascript
import { useEffect } from 'react';

useEffect(() => {
  // 여기에 부수 효과 코드를 작성합니다.
  return () => {
    // 클린업 함수는 옵셔널입니다.
  };
}, [/* 의존성 배열 */]);

데이터 가져오기 구현

이제 실제로 Axios와 useEffect를 결합하여 데이터를 가져오는 예제를 살펴보겠습니다.

기본 설정

먼저 필요한 모듈을 설치하고 기본 설정을 진행합니다.


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

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

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

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

  return (
    <div>
      <h1>Data</h1>
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};
export default App;

코드 설명

이제 위 코드를 단계별로 알아보겠습니다.

useState 훅을 사용하여 data, loading, error 상태를 정의합니다.
useEffect 훅을 사용하여 컴포넌트가 마운트될 때 데이터를 가져오는 기능을 구현합니다.
axios.get 메서드로 데이터를 가져오고, 성공 시에는 data 상태를 업데이트하며, 로딩 상태를 false로 변경합니다.
요청이 실패하면 error 상태를 업데이트하고 로딩 상태를 false로 변경합니다.
컴포넌트에는 로딩 중, 에러 발생, 데이터가 성공적으로 로드된 세 가지 상태를 각각 처리하는 조건부 렌더링이 포함되어 있습니다.

데이터의 재요청 방지

위의 예제에서는 useEffect의 두 번째 인자인 [] 빈 배열을 사용하여 컴포넌트가 마운트될 때 한 번만 데이터를 가져옵니다. 이를 통해 불필요한 데이터 재요청을 방지할 수 있습니다.

고급 주제

데이터를 가져올 때, 종종 사용자는 다양한 상호작용을 요청할 수 있습니다. 이를 처리하기 위해 debouncing 또는 throttling 같은 기법을 사용할 수 있습니다. 또한, 대규모 애플리케이션에서는 전역 상태 관리가 필요할 수 있으며, 이를 위해 Redux나 Context API 같은 라이브러리를 활용할 수 있습니다.

결론

이번 글에서는 Axios와 useEffect를 사용하여 React 애플리케이션에서 데이터를 가져오는 기본적인 방법을 알아보았습니다. 비동기 데이터 처리와 관련된 기본 개념을 이해하고, 보다 복잡한 요구사항에 대한 해결책을 찾아나가는 데 도움이 되기를 바랍니다. 지속적인 학습과 실습을 통해 더 나은 코드와 사용자 경험을 제공할 수 있을 것입니다.