React JS #12 useEffect, fetch()로 API 호출 - 초보자를 위한 리액트 강좌

    useEffect(() => {
        fetch('http://localhost:3001/days')
        .then(res => {
            return res.json();
        })
        .then(data => {
            setDays(data);
        });
    }, []);

useEffect Hook은 두 개의 인자를 받습니다. 첫 번째 인자는 실행할 콜백 함수이고, 두 번째 인자는 의존성 배열(Dependency Array)입니다. 의존성 배열은 콜백 함수가 의존하는 값의 목록을 나타내며, 이 값이 변경될 때마다 콜백 함수가 실행됩니다.

위 코드에서는 의존성 배열로 빈 배열([])을 전달하고 있으므로, 이 useEffect Hook은 컴포넌트가 처음 렌더링될 때만 실행됩니다.

콜백 함수에서는 fetch() 메소드를 사용하여 지정된 URL에 HTTP GET 요청을 보내고, 응답 데이터를 JSON 형태로 변환한 후 setDays() 함수를 사용하여 컴포넌트의 상태(State)를 업데이트합니다. 이렇게 업데이트된 상태는 컴포넌트가 다시 렌더링될 때 반영됩니다.

따라서, useEffect Hook을 사용하여 API 요청을 처리하고, 응답 데이터를 컴포넌트 상태로 설정하여 화면을 업데이트하는 방식으로 React 애플리케이션에서 비동기 데이터를 관리할 수 있습니다.

---

import { useEffect, useState } from "react";

export default function useFetch(url) {

    const [data, setData] = useState([]);

    useEffect(() => {
        fetch(url)
            .then(res => {
                return res.json();
            })
            .then(data => {
                setData(data);
            });
    }, [url]);

    return data;
}

이 코드는 react 라이브러리를 사용하여 API에서 데이터를 가져와서 컴포넌트에서 사용할 수 있도록 하는 useFetch 커스텀 훅을 구현합니다.

useEffect 훅을 사용하여 컴포넌트가 렌더링될 때마다 fetch 함수를 호출하고 API에서 데이터를 가져와 상태를 업데이트합니다.

useState 훅을 사용하여 data 상태를 초기화하고 setData 함수를 사용하여 fetch 함수가 데이터를 가져온 후에 이를 업데이트합니다.

url 매개변수는 useEffect의 의존성 배열에 포함되어 있으므로 URL이 변경될 때마다 fetch 함수가 호출됩니다.

커스텀 훅에서는 마지막으로 data 상태를 반환합니다. 이제 useFetch 훅을 사용하여 컴포넌트에서 데이터를 가져올 수 있습니다.