✏️ axios는 무엇일까? Next.js app router의 fetch

 

Axios는 무엇인가?

Axios는 브라우저를 위한 promise기반의 HTTP 비동기식 통신을 하는 라이브러리다.

서버와 통신(데이터 가져오기) : 서버와의 통신을 위해 데이터를 가져오려면 HTTP 요청을 보내야하고 , 이를 처리하기위해 `fetch`, `axios` 또는 다른 HTTP 통신을 위한 클라이언트를 사용한다.

 

React 자체에는 서버와 통신하는 기능이 내장되어 있지 않기 때문에,

서버와 통신하려면 fetch 또는 axios 같은 HTTP 클라이언트를 사용해야 한다.

 

결국은!

React에서 서버와 통신하려면: fetch 또는 axios와 같은 클라이언트를 사용해야 한다.

 

 

 

 

fetch와 axios

`fetch` :  브라우저 내장 api로 간단한 HTTP요청을 처리한다. 별도의 설치가 필요없다! 

`axios` : 더 많은 기능과 유연성을 제공하는 HTTP 클라이언트 라이브러리이다.

예를 들어, 자동 JSON 변환, 요청 및 응답 인터셉터, 취소 토큰, 그리고 좀 더 나은 에러 처리를 제공한다.

 

 

`next.js`에서는 13버전 이후의 `app router`가 나오면서, `fetch` 사용을 권장하고 있다.

fetch를 next.js에서 쓰면 데이터 캐싱등의 활용할 수 있는 요소가 있다. (Docs에 나와있음)

Functions: fetch | Next.js

하지만 어떤방식을 사용할지는 개발자의 몫이다.

 

 

 

 

Axios 기본 메서드

1. 데이터 가져오기 : `get`

2. 데이터 추가하기 : `post`

3. 데이터 삭제하기 : `delete`

4. 데이터 수정하기 : `patch & put`

 

 

 

 

설치하기

npm install axios
또는
yarn add axios

 

 

 

 

 

---

 

그럼 axios로 통신하는 todolist를 만들어보자 !

import axios from 'axios';
import { IInputForm } from '../hooks/interface';

const SERVER_URL = import.meta.env.VITE_REACT_APP_SERVER_URL;

export const todoClient = axios.create({
  baseURL: SERVER_URL,
  headers: {
    'Content-Type': 'application/json',
  },
});

// 목록 가져오기
export const getTodos = async () => {
  const { data } = await todoClient.get('/todos');
  return data;
};

//추가하기
export const createTodos = async (item: Partial<IInputForm>) => {
  const { data } = await todoClient.post('/todos', item);
  return data;
};

//삭제하기
export const deleteTodos = async (id: string) => {
  await todoClient.delete(`/todos/${id}`);
  return id;
};

//수정하기
export const updateTodos = async (
  id: string,
  todos: Partial<IInputForm>
): Promise<string> => {
  await todoClient.patch(`/todos/${id}`, todos);
  return id;
};

 

 

 

 

 

---

Next.js에서 fetch 사용 데이터 가져오기

 

1. 서버 사이드 랜더링(SSR)에서 가져오기

next.js에서는 `getServerSideProps` 함수를 사용해서 SSR시점에 데이터를 가져올 수 있다.

이 방법은 페이지가 요청될 때 마다 데이터를 가져온다.

 

 

예시코드

// pages/index.js
export async function getServerSideProps() {
  const res = await fetch('http://localhost:3001/posts');
  const data = await res.json();

  return {
    props: {
      posts: data,
    },
  };
}

export default function Home({ posts }) {
  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {posts.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

 

 

 

 

 

 

2. 클라이언트 사이드에서 데이터 가져오기 (CSR)

next.js에서 CSR에서 데이터를 가져오고 싶을 때, useEffect와 useState를 활용해서 가져올 수 있다.

 

 

예시코드

 

// pages/index.js
import { useEffect, useState } from 'react';

export default function Home() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const res = await fetch('http://localhost:3001/posts');
      const data = await res.json();
      setPosts(data);
    };

    fetchData();
  }, []);

  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {posts.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

 

 

 

 

 

3. api 라우터에서 데이터 가져오기

Next.js의 API 라우트를 설정하여 json-server에서 데이터를 가져온 후, 클라이언트에 제공할 수도 있다.

이 방법은 클라이언트가 직접 json-server에 접근하는 것을 피하고 싶을 때 유용하다.

 

 

예시코드

// pages/api/posts.js
export default async function handler(req, res) {
  const response = await fetch('http://localhost:3001/posts');
  const data = await response.json();
  
  res.status(200).json(data);
}

 

 

 

이제 클라이언트는 Next.js의 API 라우트를 통해 데이터를 가져올 수 있다.

// pages/index.js
import { useEffect, useState } from 'react';

export default function Home() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const res = await fetch('/api/posts');
      const data = await res.json();
      setPosts(data);
    };

    fetchData();
  }, []);

  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {posts.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

 

 

결론

Next.js에서는 데이터를 어떻게 가져오느냐에 따라 서버사이드 렌더링 또는 클라이언트 사이드 렌더링 방법을 선택할 수 있다.

 

 

 

 

 

Axios Docs

시작하기 | Axios Docs