리액트와 REST API 통신: Axios 활용

byCode Keeper •


리액트와 REST API 통신: Axios 활용


리액트 애플리케이션에서 데이터 통신은 매우 중요한 요소입니다. 데이터를 서버로부터 가져오거나 서버에 데이터를 전송하기 위해서는 HTTP 요청을 수행해야 합니다. Axios는 이러한 작업을 쉽게 수행할 수 있도록 도와주는 인기 있는 HTTP 클라이언트 라이브러리입니다. 이 포스팅에서는 Axios를 사용하여 리액트에서 REST API와 통신하는 방법을 자세히 살펴보겠습니다.


Axios의 중요성


Axios는 다음과 같은 장점을 제공합니다:

  • 간편한 API: 간단한 메서드 호출로 HTTP 요청을 수행할 수 있습니다.
  • Promise 기반: 비동기 작업을 쉽게 처리할 수 있도록 Promise를 지원합니다.
  • 브라우저 호환성: 다양한 브라우저에서 동작하며, Node.js에서도 사용할 수 있습니다.
  • 인터셉터: 요청이나 응답을 가로채서 변환하거나 로깅할 수 있습니다.

프로젝트 설정 및 Axios 설치


Axios를 사용하기 위해 필요한 패키지를 설치합니다. 다음 명령어를 사용하여 프로젝트를 생성하고 필요한 패키지를 설치합니다.


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

프로젝트 구조


프로젝트는 기본적으로 다음과 같은 구조를 가집니다.


my-axios-app/
├── src/
│   ├── components/
│   ├── App.js
│   ├── index.js
├── public/
├── package.json
└── README.md

이제 Axios를 사용하여 리액트 애플리케이션에서 API 통신을 구현해보겠습니다.


Axios 기본 사용법


Axios를 사용하여 기본적인 GET 요청을 수행하고 데이터를 렌더링하는 방법을 살펴보겠습니다.


GET 요청


먼저, Axios를 사용하여 간단한 GET 요청을 수행하는 컴포넌트를 작성합니다.


// src/App.js
import React, { useState, useEffect } from 'react';
import axios from 'axios';

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

  useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/posts')
      .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>Posts</h1>
      <ul>
        {data.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

위 코드에서는 useEffect 훅을 사용하여 컴포넌트가 마운트될 때 Axios를 통해 GET 요청을 수행합니다. 데이터를 받아와서 상태에 저장하고, 로딩 상태와 오류 상태를 관리합니다.


POST 요청


Axios를 사용하여 POST 요청을 수행하고, 서버에 데이터를 전송할 수 있습니다.


// src/App.js
import React, { useState } from 'react';
import axios from 'axios';

function App() {
  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,
      });
      setResponse(res.data);
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <div>
      <h1>Create Post</h1>
      <form onSubmit={handleSubmit}>
        <div>
          <label htmlFor="title">Title</label>
          <input
            id="title"
            type="text"
            value={title}
            onChange={(e) => setTitle(e.target.value)}
          />
        </div>
        <div>
          <label htmlFor="body">Body</label>
          <textarea
            id="body"
            value={body}
            onChange={(e) => setBody(e.target.value)}
          ></textarea>
        </div>
        <button type="submit">Submit</button>
      </form>
      {response && (
        <div>
          <h2>Response</h2>
          <p>ID: {response.id}</p>
          <p>Title: {response.title}</p>
          <p>Body: {response.body}</p>
        </div>
      )}
    </div>
  );
}

export default App;

위 코드에서는 사용자가 입력한 데이터를 POST 요청을 통해 서버에 전송하고, 서버로부터 응답을 받아와 화면에 출력합니다.


Axios 인터셉터 사용


Axios 인터셉터를 사용하면 요청이나 응답을 가로채서 변환하거나 로깅할 수 있습니다. 이를 통해 API 요청에 대한 공통 처리를 쉽게 구현할 수 있습니다.


요청 인터셉터


요청 인터셉터를 사용하여 모든 요청에 헤더를 추가하거나, 로딩 상태를 관리할 수 있습니다.


// src/axiosConfig.js
import axios from 'axios';

const axiosInstance = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com',
});

axiosInstance.interceptors.request.use(
  (config) => {
    // 요청 전에 작업 수행
    console.log('Request sent:', config);
    return config;
  },
  (error) => {
    // 요청 오류 처리
    return Promise.reject(error);
  }
);

export default axiosInstance;

응답 인터셉터


응답 인터셉터를 사용하여 모든 응답에 대해 공통 처리를 할 수 있습니다.


// src/axiosConfig.js
import axios from 'axios';

const axiosInstance = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com',
});

axiosInstance.interceptors.response.use(
  (response) => {
    // 응답 데이터 가공
    console.log('Response received:', response);
    return response;
  },
  (error) => {
    // 응답 오류 처리
    return Promise.reject(error);
  }
);

export default axiosInstance;

다양한 HTTP 메서드 사용


Axios를 사용하면 다양한 HTTP 메서드를 쉽게 사용할 수 있습니다. GET, POST 외에도 PUT, DELETE 등의 메서드를 사용할 수 있습니다.


PUT 요청


PUT 요청을 사용하여 서버의 데이터를 업데이트할 수 있습니다.


axios.put('https://jsonplaceholder.typicode.com/posts/1', {
  title: 'Updated Title',
  body: 'Updated Body',
});

DELETE 요청


DELETE 요청을 사용하여 서버의 데이터를 삭제할 수 있습니다.


axios.delete('https://jsonplaceholder.typicode.com/posts/1');

주요 포인트 요약 및 추가 학습 자료


이 포스팅에서는 Axios를 사용하여 리액트 애플리케이션에서 REST API와 통신하는 방법에 대해 살펴보았습니다. Axios를 사용하면 HTTP 요청을 간편하게 수행할 수 있으며, 인터셉터를 사용하여 요청과 응답을 가로채서 공통 처리를 할 수 있습니다. 추가로 학습할 자료는 다음 링크를 참고하시기 바랍니다:


Tags:
다음 이전