React에서 `useEffect`를 사용하여 API에서 데이터를 가져오는 다양한 방법

React에서 useEffect 후크는 구성 요소가 렌더링될 때 데이터를 가져오는 것과 같은 부작용을 실행하도록 설계되었습니다. API 요청을 시작하는 방법이 필요하기 때문에 이 특정한 경우에는 fetchData 함수 호출을 피할 수 없지만 요구 사항에 따라 이를 단순화하거나 추상화할 수 있습니다.

접근방법

1. 가져오기 논리 인라인

fetchData를 별도의 함수로 정의하는 대신 useEffect 후크 내부에 직접 가져오기 로직을 ​​인라인할 수 있습니다.

useEffect(() => {
    const fetchData = async () => {
        setLoading(true);
        try {
            const response = await fetch('http://127.0.0.1:5000/indicators_signals');
            const data = await response.json();
            setData(data);
        } catch (error) {
            console.error('Error fetching data:', error);
        } finally {
            setLoading(false);
        }
    };

    fetchData();
}, []); // Empty dependency array ensures this runs only once

이 접근 방식을 사용하면 fetchData에 대한 명시적인 호출이 제거되지만 논리는 여전히 인라인 비동기 함수로 존재합니다.

---

2. 명시적 함수 없이 자동으로 API 호출

useEffect 내에서 IIFE(즉시 호출 함수 표현식)로 가져오기 작업을 직접 실행할 수 있습니다. 이렇게 하면 fetchData와 같은 명명된 함수가 필요하지 않습니다.

useEffect(() => {
    (async () => {
        setLoading(true);
        try {
            const response = await fetch('http://127.0.0.1:5000/indicators_signals');
            const data = await response.json();
            setData(data);
        } catch (error) {
            console.error('Error fetching data:', error);
        } finally {
            setLoading(false);
        }
    })(); // The function is invoked immediately
}, []);

이렇게 하면 명명된 함수를 명시적으로 호출하지 않고 가져오기 논리가 직접 실행됩니다.

---

3. 맞춤형 후크 사용

가져오기 로직을 ​​사용자 정의 후크로 추상화하여 기능을 캡슐화하고 구성 요소를 더 깔끔하게 유지할 수 있습니다.

사용자 정의 후크: useFetch

import { useState, useEffect } from 'react';

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

    useEffect(() => {
        (async () => {
            try {
                const response = await fetch(url);
                const result = await response.json();
                setData(result);
            } catch (err) {
                setError(err);
            } finally {
                setLoading(false);
            }
        })();
    }, [url]);

    return { data, loading, error };
};

export default useFetch;

구성 요소에 후크 사용

import useFetch from './hooks/useFetch';

const MyComponent = () => {
    const { data, loading, error } = useFetch('http://127.0.0.1:5000/indicators_signals');

    if (loading) return <p>Loading...</p>;
    if (error) return <p>Error: {error.message}</p>;

    return (
        <div>
            <h1>Data from API:</h1>
            <pre class="brush:php;toolbar:false">{JSON.stringify(data, null, 2)}