React 애플리케이션에서 API 요청 기능을 추가하려면 Custom Hook을 사용할 수 있습니다. Custom Hook은 React 컴포넌트에서 상태와 라이프사이클을 관리하기 위한 재사용 가능한 로직을 추상화하는 방법입니다. 이 포스트에서는 Custom Hook을 사용하여 API 요청 기능을 구현하는 방법을 알아보겠습니다.
1. Custom Hook 생성하기
먼저, API 요청을 처리하는 Custom Hook을 작성해야 합니다. 이를 위해 useEffect와 useState 훅을 사용하여 상태와 라이프사이클을 관리합니다. 예를 들어, useFetch라는 이름의 Custom Hook을 아래와 같이 작성할 수 있습니다.
import { useEffect, useState } from 'react';
export const useFetch = (url) => {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
const fetchData = async () => {
try {
const response = await fetch(url);
const responseData = await response.json();
setData(responseData);
} catch (error) {
setError(error);
} finally {
setLoading(false);
}
};
fetchData();
}, [url]);
return { data, loading, error };
};
위의 코드에서 useFetch Custom Hook은 url을 인자로 받아 API를 호출하고 상태를 관리합니다. 데이터 요청이 완료되면 data에 응답 데이터를 저장하고, 로딩 상태를 loading 변수로 추적합니다. 에러가 발생하면 error 변수에 에러 메시지를 저장합니다. 마지막으로, data, loading, error를 반환합니다.
2. Custom Hook 사용하기
Custom Hook을 작성한 후에는 이를 컴포넌트에서 사용할 수 있습니다. 컴포넌트에서 API 요청을 수행하고 데이터를 사용하는 예제 코드를 작성해 보겠습니다.
import React from 'react';
import { useFetch } from './useFetch';
const MyComponent = () => {
const { data, loading, error } = useFetch('https://api.example.com/data');
if (loading) {
return <div>Loading...</div>;
}
if (error) {
return <div>Error occurred: {error.message}</div>;
}
return (
<div>
{/* 데이터를 사용하여 표시하는 로직 작성 */}
</div>
);
};
export default MyComponent;
위의 코드에서 useFetch Custom Hook을 호출하여 API 요청을 수행하고, 상태 변수들을 가져옵니다. 로딩 중이면 로딩 메시지를 표시하고, 에러가 발생하면 에러 메시지를 표시합니다. 그렇지 않은 경우 데이터를 사용하여 컴포넌트를 렌더링합니다.