이번 모각코꾸멍 프로젝트에서는 통신시에 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의 통신이 실패했을 때의 에러 statedata
: axios의 통신이 성공했을 때 받아오는 데이터 statefetchData
: 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 해준다.
2️⃣ axios의 실행이 필요한 함수 안에 fetchData
를 실행시켜준다.
fetchData
는 url
method
header
body
를 인자로 넣어준다.3️⃣ event함수가 필요한 곳에 사용해준다.
처음에는 useAxios.tsx에 fetchData
를 useEffect
안에 넣어서 사용하고, return도 loading
error
data
총 3개만 했었다. 그랬더니 clickEvent 함수 안에 useAxios를 사용할 수 없는 문제점이 생겼다.
그래서 useEffect
를 사용하지 않고 fetchData
를 밖으로 빼내서 return 시켜줬더니 문제가 해결됐다.