상태관리 라이브러리(jotai, zustand, redux) 등을 사용해서 구현할수 있지만 react 자체에서 제공하는 훅인

useReducer를 사용해서 관리할수도 있습니다.

import { useEffect, useReducer } from "react";

const INIT_VALUE = {
  isLoading: false,
  isFinish: false,
  isError: false,
};

const reducer = (state, action) => {
  switch (action.type) {
    case "FETCH_LOADING":
      return { isLoading: true, isFinish: false, isError: false };

    case "FETCH_SUCCESS":
      return { isLoading: false, isFinish: true, isError: false };

    case "FETCH_FAIL":
      return { isLoading: false, isFinish: false, isError: true };

    default:
      return INIT_VALUE;
  }
};

function App() {
  const [state, dispatch] = useReducer(reducer, INIT_VALUE);

  const fetchData = () => {
    //fetch Data 시도
    dispatch({ type: "FETCH_LOADING" });

    fetch("<https://~~>")
      .then(() => {
        //fetch data 성공
        dispatch({ type: "FETCH_SUCCESS" });
      })
      .catch(() => {
        //fetch data 실패
        dispatch({ type: "FETCH_FAIL" });
      });
  };

  useEffect(() => {
    fetchData();
  }, []);

  return (
    <div>
      {state.isLoading && "로딩중"}
      {state.isFinish && "data 불러오기 성공"}
      {state.isError && "에러"}
    </div>
  );
}

export default App;

위 코드처럼 useReducer를 활용한다면 코드가 길어진다고 느낄수도 있지만, action에 대한 함수를 직접

정의할수 있어 보다 체계적으로 관리할수 있습니다.