React에서 데이터 Fetching하기 (Axios)

 

React 애플리케이션에서 데이터를 가져오는 것은 매우 중요한 작업입니다. 데이터를 서버에서 가져와 사용자 인터페이스를 동적으로 업데이트할 수 있기 때문입니다. 이번 글에서는 Axios를 사용해 데이터를 Fetching하는 방법과 함께 몇 가지 예제를 통해 이를 구현하는 방법을 알아보겠습니다.

1. Axios란 무엇인가?

Axios는 Promise 기반의 HTTP 클라이언트로, 브라우저와 Node.js 환경에서 모두 사용할 수 있습니다. React 애플리케이션에서는 주로 REST API와 통신하기 위해 Axios를 사용합니다.

Axios의 주요 특징

• Promise 기반으로 비동기 작업 처리 지원
• 간단한 API로 HTTP 요청 관리
• 요청 및 응답 인터셉터 제공
• JSON 데이터 자동 변환

2. Axios 설치

Axios를 사용하려면 프로젝트에 해당 패키지를 설치해야 합니다. 아래 명령어를 사용하여 설치를 진행합니다.

npm install axios

또는 Yarn을 사용하는 경우:

yarn add axios

3. 기본적인 데이터 Fetching

데이터 Fetching은 일반적으로 React 컴포넌트가 렌더링될 때 수행됩니다. useEffect 훅과 Axios를 조합하여 구현할 수 있습니다.

예제: 기본 데이터 Fetching

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

function App() {
  const [data, setData] = useState([]);

  useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/posts')
      .then(response => {
        setData(response.data);
      })
      .catch(error => {
        console.error('Error fetching data:', error);
      });
  }, []);

  return (

Posts

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

  );
}

export default App;

설명

1. axios.get(url): 지정된 URL에서 데이터를 가져옵니다.
2. .then(response => {...}): 요청이 성공했을 때 실행되는 콜백입니다.
3. .catch(error => {...}): 요청이 실패했을 때 에러를 처리합니다.
4. useEffect: 컴포넌트가 마운트될 때 한 번만 데이터를 가져옵니다.

4. POST 요청으로 데이터 전송

Axios는 데이터를 서버로 전송하기 위한 POST 요청도 간단히 지원합니다.

예제: POST 요청

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

function App() {
  const [title, setTitle] = useState('');
  const [body, setBody] = useState('');

  const handleSubmit = () => {
    axios.post('https://jsonplaceholder.typicode.com/posts', {
      title,
      body
    })
      .then(response => {
        console.log('Data posted:', response.data);
      })
      .catch(error => {
        console.error('Error posting data:', error);
      });
  };

  return (

Create Post

setTitle(e.target.value)} /> setBody(e.target.value)} /> <button onClick={handleSubmit}>Submit</button> </div> ); } export default App;

설명

1. axios.post(url, data): 지정된 URL로 데이터를 전송합니다.
2. 요청 본문(body)에 포함될 데이터를 객체 형태로 전달합니다.
3. 서버로부터의 응답은 .then()에서 확인할 수 있습니다.

5. 요청 및 응답 인터셉터 사용

Axios는 요청과 응답을 가로채 추가 처리를 수행할 수 있는 인터셉터를 제공합니다.

예제: 요청 및 응답 인터셉터

import axios from 'axios';

// 요청 인터셉터 설정
axios.interceptors.request.use(
  config => {
    console.log('Request sent:', config);
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

// 응답 인터셉터 설정
axios.interceptors.response.use(
  response => {
    console.log('Response received:', response);
    return response;
  },
  error => {
    return Promise.reject(error);
  }
);

설명

1. 요청 인터셉터: 요청이 서버로 전송되기 전에 실행됩니다.
2. 응답 인터셉터: 서버로부터의 응답을 처리하기 전에 실행됩니다.
3. 인터셉터를 활용하면 로깅, 인증 토큰 추가 등의 작업을 쉽게 구현할 수 있습니다.

6. 마무리

이번 글에서는 Axios를 사용해 React에서 데이터를 Fetching하는 방법을 살펴보았습니다. 간단한 GET 요청부터 POST 요청, 인터셉터 활용까지 다양한 예제를 통해 Axios의 강력한 기능을 확인할 수 있었습니다. Axios를 활용하면 React 애플리케이션에서 더욱 효율적으로 서버와 통신할 수 있습니다. 이제 직접 구현해 보며 익혀 보세요!