코드종 Youtube 채널 바로가기
처음으로 타입스크립트를 사용해보았습니다. 전에 리뷰하셨던 useFetch custom hooks입니다.
vscode에 설치되어있는 타입스크립트 plugin 통해서는 에러가 나지 않는듯 합니다.
하지만 왠지 뭔가 부족한듯 합니다. 고급스럽게 types 혹은 interfaces를 사용할수도 있지 않을까 싶습니다.
좋은 리뷰 감사드립니다 
const useFetch = (url: string, method?: string) => {
const token = localStorage.getItem('token');
const [data, setData] = useState<Array<object>>([]);
const [loading, setLoading] = useState<boolean>(false);
const [error, setError] = useState<boolean>(false);
if (!url || url.length === 0) {
console.error('Missing url');
if (!error) setError(true);
if (loading) setLoading(false);
return { data, loading, error };
}
if (!token) {
console.error('No token mate');
if (!error) setError(true);
if (loading) setLoading(false);
return { data, loading, error };
}
const runFetchProcess = async (data?: object) => {
setLoading(true);
const requestMethod = method === 'POST' ? 'POST' : 'GET';
let requestHeader = {
headers: {
Authorization: `Bearer ${JSON.parse(token)}`,
'Content-Type': 'application/json',
},
method: requestMethod,
body: JSON.stringify(data)
};
try {
const response = await fetch(url, requestHeader);
const responseData = await response?.json();
if (!response.ok) {
setLoading(false);
setError(true);
throw Error('something wrong here mate');
} else {
setData(responseData);
setLoading(false);
}
} catch (e) {
setError(true);
console.error('useFetch.js', e);
} finally {
setLoading(false);
}
};
const post = (data: object) => {
if (!data) {
setError(true);
return;
}
runFetchProcess(data);
};
useEffect(() => {
if (method) return;
runFetchProcess();
}, []);
return { data, loading, error, fetch: runFetchProcess, post };
};