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>{JSON.stringify(data, null, 2)}</pre>
        </div>
    );
};

---

4. 상위 수준 구성요소에서 데이터 프리패치

필요한 컴포넌트 내부에서 데이터를 가져오는 대신 상위 또는 상위 컴포넌트에서 데이터를 가져와서 props로 전달하세요.

const App = () => {
    const [data, setData] = useState(null);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        (async () => {
            try {
                const response = await fetch('http://127.0.0.1:5000/indicators_signals');
                const result = await response.json();
                setData(result);
            } finally {
                setLoading(false);
            }
        })();
    }, []);

    if (loading) return <p>Loading...</p>;

    return <ChildComponent data={data} />;
};

const ChildComponent = ({ data }) => (
    <div>
        <h1>Data:</h1>
        <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
);

---

주요 시사점

• API 호출은 시작되어야 하는 비동기 작업이므로 일부 함수를 호출하지 않고는 데이터를 가져올 수 없습니다(명시적이든 암시적이든).
• IIFE, 사용자 정의 후크 또는 더 높은 수준의 프리페칭과 같은 기술을 사용하면 구조를 단순화하고 가져오기 논리를 추상화할 수 있습니다.
• 애플리케이션의 구조와 가독성 목표에 가장 적합한 접근 방식을 선택하세요. 재사용 가능한 가져오기 논리를 위해서는 사용자 정의 후크가 탁월한 선택입니다!

위 내용은 React에서 `useEffect`를 사용하여 API에서 데이터를 가져오는 다양한 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!