React에서 Axios를 통한 데이터 처리

 

React 애플리케이션에서 데이터를 효율적으로 처리하는 것은 중요한 과제입니다. 이를 위해 널리 사용되는 HTTP 클라이언트 라이브러리인 Axios는 간단한 API와 강력한 기능으로 많은 개발자들에게 사랑받고 있습니다. 이번 글에서는 React에서 Axios를 활용해 데이터를 처리하는 방법과 실제 예제를 중심으로 살펴보겠습니다.

Axios란 무엇인가?

Axios는 브라우저와 Node.js 환경에서 모두 사용 가능한 HTTP 클라이언트 라이브러리입니다. 다음과 같은 주요 특징을 가지고 있습니다:

• Promise 기반 API: 비동기 작업을 처리하기 위해 ES6의 Promise를 활용하며, async/await 문법과도 잘 어울립니다.
• 요청 및 응답 데이터 변환: JSON 데이터를 자동으로 변환합니다.
• 인터셉터 지원: 요청 또는 응답을 가로채고 처리할 수 있습니다.
• 취소 기능: 불필요한 요청을 취소할 수 있는 기능을 제공합니다.
• 브라우저와 Node.js에서 사용 가능: 환경에 따라 적절한 네트워크 요청 처리를 지원합니다.

React 프로젝트에서 Axios 설치

Axios를 사용하려면 프로젝트에 Axios 패키지를 설치해야 합니다. 다음 명령어를 사용해 설치할 수 있습니다:

npm install axios

또는 yarn을 사용하는 경우:

yarn add axios

설치가 완료되면 Axios를 React 컴포넌트에서 사용할 준비가 됩니다.

Axios로 데이터 가져오기 (GET 요청)

React에서 데이터를 가져오는 가장 기본적인 방법은 Axios의 get 메서드를 사용하는 것입니다. 아래는 Axios를 활용한 데이터 가져오기 예제입니다:

예제: 간단한 데이터 가져오기

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

const DataFetching = () => {
  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://jsonplaceholder.typicode.com/posts');
        setData(response.data);
        setLoading(false);
      } catch (err) {
        setError(err.message);
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  if (loading) return

Loading...

;
  if (error) return

Error: {error}

;

  return (

Posts

{data.map((post) => (
• {post.title}
))}

  );
};

export default DataFetching;

코드 설명

1. useState를 사용해 상태 관리: data, loading, error 상태를 관리합니다.
2. useEffect로 컴포넌트가 마운트될 때 데이터 가져오기: Axios를 통해 데이터를 가져옵니다.
3. 에러 처리: try-catch 블록을 사용해 네트워크 요청 중 발생할 수 있는 에러를 처리합니다.

Axios로 데이터 보내기 (POST 요청)

Axios의 post 메서드를 사용해 서버로 데이터를 보낼 수 있습니다. 아래는 간단한 POST 요청 예제입니다:

예제: 새로운 데이터 생성하기

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

const DataPosting = () => {
  const [title, setTitle] = useState('');
  const [body, setBody] = useState('');
  const [response, setResponse] = useState(null);

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const res = await axios.post('https://jsonplaceholder.typicode.com/posts', {
        title,
        body,
        userId: 1,
      });
      setResponse(res.data);
    } catch (err) {
      console.error(err);
    }
  };

  return (

Create a Post

Title: setTitle(e.target.value)} />

Body: setBody(e.target.value)}>

{response && (

Response:

{JSON.stringify(response, null, 2)}

)}

); }; export default DataPosting;

코드 설명

1. 사용자 입력 처리: title과 body 상태를 사용자가 입력한 값으로 업데이트합니다.
2. Axios의 post 메서드로 서버에 데이터 전송: 서버에서 받은 응답 데이터를 화면에 표시합니다.

Axios 인터셉터 활용하기

인터셉터를 사용하면 요청이나 응답을 처리하기 전에 공통 작업을 수행할 수 있습니다. 예를 들어, 인증 토큰 추가나 에러 로깅 등을 처리할 수 있습니다.

요청 인터셉터 예제

import axios from 'axios';

axios.interceptors.request.use(
  (config) => {
    // 토큰 추가
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

응답 인터셉터 예제

axios.interceptors.response.use(
  (response) => {
    // 성공적인 응답 처리
    return response;
  },
  (error) => {
    // 에러 처리
    if (error.response && error.response.status === 401) {
      console.error('인증 오류!');
    }
    return Promise.reject(error);
  }
);

결론

React에서 Axios를 사용하면 HTTP 요청과 응답을 간단하고 효율적으로 처리할 수 있습니다. 기본적인 GET/POST 요청부터 인터셉터 활용까지, Axios는 다양한 요구사항을 충족시킬 수 있는 유연한 도구입니다. 위 예제들을 바탕으로 여러분의 React 프로젝트에 Axios를 적용해보세요!