리엑트 Axios를 사용하여 데이터 바인딩하기

React를 이용해서 개발하는 프로젝트 중에 데이터 바인딩을 해야하는 상황이 놓였는데, 어떻게 하면 좋을지 생각을 해보습니다 매번 데이터를 받아올 때 더미데이터를 이용해서 만들어왔었는데, 실질적으로 백엔드에서 만든 api를 JSON형식으로 받아서 데이터를 할당하려면 어떻게 하면 좋을지 생각을 해보고 찾아보게 되었습니다.

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

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

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

  return (
    <div>
      {data ? (
        <ul>
          {data.map((item) => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
}

위 코드에서 axios.get() 함수를 사용하여 https://example.com/api/data 주소로 GET 요청을 보내고, 요청이 완료되면 response.data를 파싱하여 data state에 저장합니다. useEffect() 함수를 사용하여 컴포넌트가 마운트될 때 한 번만 실행되도록 설정합니다. 마지막으로, data state가 null이 아닌 경우, 데이터를 바인딩하여 화면에 표시합니다.

axios는 fetch() 함수와 달리 크로스 브라우징 등의 문제를 해결하는 데 도움이 됩니다. 또한, 간편한 인터셉터 기능과 같은 다양한 기능을 제공하므로, 프로젝트에서 axios를 사용하는 것을 권장합니다.