Axios 사용방법

Axios는 Node.js와 브라우저에서 실행되는 Promise 기반 HTTP 클라이언트 라이브러리입니다. 이를 사용하여 HTTP 요청을 생성하고 서버로부터 데이터를 가져올 수 있습니다.

다음은 axios의 기본 사용 방법입니다.

import axios from 'axios';

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.log(error);
  });
  

'axios.get' 메소드를 사용하여 'https://api.example.com/data'에서 데이터를 가져오는 GET 요청을 보냅니다. 이 요청은 Promise를 반환하므로 '.then'과 '.catch' 메소드를 사용하여 응답을 처리할 수 있습니다. 성공적으로 응답을 받은 경우 '.then' 메소드가 호출되며, 응답 데이터는 'response.data'에 포함됩니다. 오류가 발생한 경우 '.catch' 메소드가 호출되며, 오류 정보는 'error' 매개변수로 전달됩니다.

next.js에서 axios를 사용할 때는 axios 모듈을 가져와서 이와 같이 HTTP 요청을 만들 수 있습니다. 예를 들어, 다음과 같이 데이터를 가져오는 페이지를 만들 수 있습니다.

import axios from 'axios';

function Page({ data }) {
  return (
    <div>{data}</div>
  );
}

export async function getServerSideProps() {
  const response = await axios.get(`https://api.example.com/data`);
  const data = response.data;
  return {
    props: {
      data
    }
  };
}

export default Page;

위의 예제에서는 'getServerSideProps' 메소드를 사용하여 서버 측에서 데이터를 가져옵니다. 이 데이터는 페이지 구성 요소에 전달되고, 페이지가 렌더링될 때 이를 표시합니다. 'getServerSideProps' 메소드는 페이지를 호출할 떄마다 호출되며, 페이지 내에서 사용되는 데이터를 가져오는 데 사용됩니다.

위의 예제는 서버 측에서 데이터를 가져오는 방법을 보여주기 위한 것입니다. 클라이언트 측에서 데이터를 가져오는 경우에도 axios를 사용할 수 있습니다. 이 경우, 'useEffect' 훅을 사용하여 컴포넌트가 마운트될 때 데이터를 가져올 수 있습니다.

'useState' 함수와 axios를 사용하여 데이터를 가져와서 로딩하는 방법

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

function Page() {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  // useState를 사용하여 data와 isLoading 상태 변수를 생성
  // data는 가져온 데이터를 저장하고, isLoading은 데이터를 가져올 때 로딩 중임을 나타냄
  
  useEffect(() => {
  //useEffect 훅을 사용하여 데이터를 가져오는 함수를 정의
    const fetchData = async () => {
    //함수는 async로 정의되며, axios를 사용하여 데이터를 가져오고, 가져온 데이터를 'setData'를 사용하여 'data' 상태 변수에 저장
      try {
        const response = await axios.get('https://api. example.com/data');
        setData(response.data);
      } catch (error) {
        console.log(error);
      } finally {
        setIsLoading(false);
      }
      // try/catch 문을 사용하여 오류를 처리하고, finally 블록을 사용하여 isLoading 상태 변수를 false로 설정하여 로딩이 완료되었음을 나타냄
    };
    fetchData();
  }, []);
  // useEffect 훅의 두 번째 매개변수로 빈 배열 '[]'을 전달하여, 페이지가 처음 렌더링될 때만 데이터를 가져오도록 설정합니다. 만약 이 값을 제거하면 페이지가 다시 렌더링될 때마다 데이터를 가져오게 됩니다. 이 경우, 'isLoading' 상태 변수를 사용하여 로딩 중임을 나타낼 수 있음
  
  if (isLoading) {
    return <div>Loading...</div>;
  }
  // if 문을 사용하여 'isLoading'이 'true'인 동안 로딩 중임을 나타내는 메세지를 표시
  
  return (
    <div>{ data }</div>
  );
  // 로딩이 완료된 경우에는 data를 표시
}

export default Page;