리액트 React | React에서 Ajax(비동기 통신) 사용하기: Axios 방식

 

 

⭕ 리액트 React | React에서 Ajax(비동기 통신) 사용하기

Ajax는 서버에 새로고침 없이 요청을 할 수 있게 도와주는 일종의 JavaScript 코드입니다.

---

React에서는 Ajax(Asynchronous JavaScript and XML)를 사용하여 서버와의 비동기 통신을 처리할 수 있습니다. 이를 통해 웹 애플리케이션에서 데이터를 동적으로 로드하거나 업데이트할 수 있습니다. 

---

라이브러리로는 Axios, jQuery AJAX, 그리고 브라우저에 내장된 window.fetch 등이 있습니다. 주로 Axios와 window.fetch를 많이 사용합니다.

⭕ Axios 방식

➡️ Axios 라이브러리 설치

가장 일반적으로 사용되는 Ajax 라이브러리 중 하나인 Axios를 사용하여 Ajax 요청을 처리할 것입니다. 먼저 프로젝트에 Axios를 설치합니다.

npm install axios

 

➡️ Axios를 사용하여 데이터 가져오기

Axios를 사용하여 데이터를 가져오는 코드입니다. useEffect 훅을 사용하여 컴포넌트가 마운트 될 때 한 번만 데이터를 가져오도록 설정하고, axios.get 메서드를 사용하여 데이터를 가져옵니다.

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

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

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await axios.get('https://api.example.com/data');
        setData(response.data);
      } catch (error) {
        console.error('Error fetching data:', error);
      } finally {
        setLoading(false);
      }
    }

    fetchData();
  }, []);

  return (
    <div>
      {loading ? (
        <p>Loading...</p>
      ) : (
        <div>
          {data ? (
            <div>
              <h2>Data fetched successfully:</h2>
              <p>{data}</p>
            </div>
          ) : (
            <p>No data available.</p>
          )}
        </div>
      )}
    </div>
  );
}

export default MyComponent;

 

➡️ 요청 보내기 및 응답 처리하기

Axios를 사용하여 GET 요청을 보내고, 요청이 성공하면 응답 데이터를 콘솔에 출력하고, 실패하면 에러를 콘솔에 출력하는 코드입니다.

axios.get('https://api.example.com/data')
  .then(response => {
    // 요청 성공 시 처리할 내용
    console.log('Response:', response.data);
  })
  .catch(error => {
    // 요청 실패 시 처리할 내용
    console.error('Error:', error);
  });