axios 라이브러리 소개

npm install axios
# 또는
yarn add axios

import axios from 'axios';

// 모든 게시물 가져오기
axios.get('http://localhost:4000/posts?_limit=10')
  .then(response => {
    console.log('게시물 목록:', response.data);
  })
  .catch(error => {
    console.error('게시물 가져오기 오류:', error);
  });

// 특정 ID의 게시물 가져오기
axios.get('http://localhost:4000/posts/1')
  .then(response => {
    console.log('단일 게시물:', response.data);
  })
  .catch(error => {
    console.error('단일 게시물 가져오기 오류:', error);
  });

axios.get('http://localhost:4000/posts', {
  params: { _page: 1, _per_page: 10 },
}).then(response => {
  console.log('게시물 목록:', response.data.data);
});

axios.post('http://localhost:4000/posts', {
  title: '새로운 게시물',
  body: '이것은 Axios로 작성된 새 게시물입니다.',
  userId: 1,
})
.then(response => {
  console.log('게시물 생성 성공:', response.data);
})
.catch(error => {
  console.error('게시물 생성 오류:', error);
});

// PUT 요청 (전체 업데이트)
axios.put('http://localhost:4000/posts/1', {
  title: '업데이트된 제목',
  body: '내용도 완전히 바뀌었습니다.',
  userId: 1,
})
.then(response => {
  console.log('게시물 PUT 업데이트 성공:', response.data);
})
.catch(error => {
  console.error('게시물 PUT 업데이트 오류:', error);
});

// PATCH 요청 (부분 업데이트)
axios.patch('http://localhost:4000/posts/1', {
  title: '부분적으로 업데이트된 제목',
})
.then(response => {
  console.log('게시물 PATCH 업데이트 성공:', response.data);
})
.catch(error => {
  console.error('게시물 PATCH 업데이트 오류:', error);
});

axios.delete('http://localhost:4000/posts/1')
  .then(response => {
    console.log('게시물 삭제 성공:', response.status); // 200 OK, 204 No Content 등
  })
  .catch(error => {
    console.error('게시물 삭제 오류:', error);
  });

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

function AxiosExample() {
  const [post, setPost] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const controller = new AbortController();
    let active = true;

    const fetchPost = async () => {
      try {
        setLoading(true);
        setError(null);
        const response = await axios.get('http://localhost:4000/posts/1', {
          signal: controller.signal,
        });
        if (active) setPost(response.data);
      } catch (err) {
        if (!active) return;
        if (axios.isAxiosError(err) && err.code === 'ERR_CANCELED') return;

        if (!axios.isAxiosError(err)) {
          setError(new Error('예상하지 못한 오류가 발생했습니다.'));
        } else if (err.response) {
          setError(new Error(`서버가 ${err.response.status} 상태로 응답했습니다.`));
        } else if (err.request) {
          const message = ['ECONNABORTED', 'ETIMEDOUT'].includes(err.code)
            ? '요청 시간이 초과되었습니다.'
            : '서버 응답을 받지 못했습니다.';
          setError(new Error(message));
        } else {
          setError(new Error(`요청을 구성하지 못했습니다: ${err.message}`));
        }
      } finally {
        if (active) setLoading(false);
      }
    };

    fetchPost();

    return () => {
      active = false;
      controller.abort();
    };
  }, []);

  if (loading) {
    return <div style={{ textAlign: 'center', padding: '20px' }}>Axios로 게시물을 불러오는 중...</div>;
  }

  if (error) {
    return <div style={{ textAlign: 'center', padding: '20px', color: 'red' }}>Axios 오류: {error.message}</div>;
  }

  return (
    <div style={{ maxWidth: '600px', margin: '20px auto', padding: '25px', border: '1px solid #ddd', borderRadius: '8px', boxShadow: '0 2px 5px rgba(0,0,0,0.05)', backgroundColor: '#fdfdfd' }}>
      <h2 style={{ textAlign: 'center', color: '#2c3e50', marginBottom: '20px' }}>Axios로 가져온 게시물</h2>
      <h3 style={{ color: '#3498db', marginBottom: '10px' }}>{post.title}</h3>
      <p>{post.body}</p>
    </div>
  );
}

export default AxiosExample;

import axios from 'axios';

const mockApi = axios.create({
  baseURL: 'http://localhost:4000', // 로컬 mock 서버 기본 URL
  timeout: 5000, // 5초 동안 응답이 없으면 타임아웃
});

export default mockApi;

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import mockApi from '../api/mockApi'; // 인스턴스 임포트

function AxiosInstanceExample() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const controller = new AbortController();
    let active = true;

    const fetchUsers = async () => {
      try {
        setLoading(true);
        setError(null);
        const response = await mockApi.get('/users', {
          signal: controller.signal,
        });
        if (active) setUsers(Array.isArray(response.data) ? response.data : []);
      } catch (err) {
        if (!active) return;
        if (axios.isAxiosError(err) && err.code === 'ERR_CANCELED') return;
        setError(err instanceof Error ? err : new Error('예상하지 못한 오류가 발생했습니다.'));
      } finally {
        if (active) setLoading(false);
      }
    };

    fetchUsers();

    return () => {
      active = false;
      controller.abort();
    };
  }, []);

  if (loading) {
    return <div style={{ textAlign: 'center', padding: '20px' }}>Axios 인스턴스로 사용자 목록 불러오는 중...</div>;
  }

  if (error) {
    return <div style={{ textAlign: 'center', padding: '20px', color: 'red' }}>Axios 인스턴스 오류: {error.message}</div>;
  }

  return (
    <div style={{ maxWidth: '800px', margin: '20px auto', padding: '20px', border: '1px solid #ddd', borderRadius: '8px', boxShadow: '0 2px 5px rgba(0,0,0,0.05)' }}>
      <h2 style={{ textAlign: 'center', color: '#2c3e50' }}>Axios 인스턴스 사용 예시 (사용자 목록)</h2>
      <ul style={{ listStyle: 'none', padding: 0 }}>
        {users.map(user => (
          <li
            key={user.id}
            style={{
              padding: '15px',
              marginBottom: '10px',
              border: '1px solid #eee',
              borderRadius: '5px',
              backgroundColor: '#fefefe',
              boxShadow: '0 1px 3px rgba(0,0,0,0.02)',
            }}
          >
            <strong style={{ color: '#3498db' }}>{user.firstName} {user.lastName}</strong> ({user.username}) - {user.email}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default AxiosInstanceExample;

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

const useAxiosFetch = (url, options) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const controller = new AbortController();
    let active = true;

    const fetchData = async () => {
      if (!url) {
        setLoading(false);
        return;
      }

      setLoading(true);
      setError(null);

      try {
        const response = await axios.get(url, {
          ...options,
          signal: controller.signal,
        });
        if (active) setData(response.data);
      } catch (err) {
        if (!active) return;
        if (axios.isAxiosError(err) && err.code === 'ERR_CANCELED') return;
        setError(err);
      } finally {
        if (active) setLoading(false);
      }
    };

    fetchData();

    return () => {
      active = false;
      controller.abort();
    };
  }, [url, options]);

  return { data, loading, error };
};

export default useAxiosFetch;