[TypeScript + React] useAxios 사용법

이번 모각코꾸멍 프로젝트에서는 통신시에 axios 를 사용하기로 했다.
여기서 문제는? 난 axios 안 써 봤다.. ㅎㅎ 기업협업 나가서 써보긴했는데 대표님이 따로 만들어두신 함수 사용했고 두번..? 해봐서 안해본거나 마찬가지.. 😅

어쩌다가 내가 useAxios 만들기 담당이 되어버려서 이번 기회에 공부해봤당 👩🏻‍💻

---

👩🏻‍💻 최종코드

useAxios.tsx

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

export default function useAxios() {
  const [data, setData] = useState<any>(null);
  const [loading, setLoading] = useState<boolean>(false);
  const [error, setError] = useState<string | null>('');

  const fetchData = async (url: any) => {
    try {
      setLoading(true);
      const response = await axios.request(url);
      const data = response?.data;
      setData(data);
    } catch (error: any) {
      setError(error);
    } finally {
      setLoading(false);
    }
  };

  return [loading, error, data, fetchData];
}

우선 useAxios.tsx에서는 총 4가지의 값을 return 해준다.

• loading : axios를 실행시키고 대기 중인 상태의 state
• error : axios의 통신이 실패했을 때의 에러 state
• data : axios의 통신이 성공했을 때 받아오는 데이터 state
• fetchData: axios의 통신을 담당하는 함수

이렇게 만든 useAxios hook은 아래처럼 사용하면 된다.

예제는 post버튼 클릭시 블로그의 값들을 서버로 보내는 코드이다.

postBtn.tsx

import React, { useEffect } from 'react';
import useAxios from '../../../hooks/useAxios';


export default function PostBtn({ postData }: dataProps) {
1️⃣  const [loading, error, data, fetchData] = useAxios();

  const clickHandler = () => {
  2️⃣  fetchData({
      url: 'http://172.20.10.11:3000/blog',
      method: 'POST',
      headers: {
        'Content-Type': `application/json`,
      },
      data: postData,
    });
  };
  console.log('✅data => ', data);
  console.log('✅loading => ', loading);
  console.log('✅error=> ', error);

  return (
     
      <button
      3️⃣  onClick={() => clickHandler()}
        className="btn bg-mkOrange border-mkOrange hover:bg-mkDarkOrange hover:border-mkDarkOrange"
      >
        Post
      </button>
  );
}

1️⃣ useAxios hook을 import 해준다.

• loading : axios가 loading 중인지 확인 가능
• error : 통신 실패 시 에러 메세지 확인 가능
• data : 통신이 성공했을 때 data의 값
• fetchData : axios가 실행되는 함수

2️⃣  axios의 실행이 필요한 함수 안에 fetchData를 실행시켜준다.

• fetchData 는 url method header body 를 인자로 넣어준다.

3️⃣ event함수가 필요한 곳에 사용해준다.

---

처음에는 useAxios.tsx에 fetchData를 useEffect안에 넣어서 사용하고, return도 loading error data 총 3개만 했었다. 그랬더니 clickEvent 함수 안에 useAxios를 사용할 수 없는 문제점이 생겼다.

그래서 useEffect를 사용하지 않고 fetchData를 밖으로 빼내서 return 시켜줬더니 문제가 해결됐다.