import { useEffect, useState } from "react";

function App() {
  const [fetchState, setFetchState] = useState({
    isLoading: false,
    isFinish: false,
    isError: false,
  });

  const fetchData = () => {
    //fetch Data 시도
    setFetchState((prevState) => ({ ...prevState, isLoading: true }));

    fetch("<https://~~>")
      .then(() => {
        //fetch data 성공
        setFetchState((prevState) => ({ ...prevState, isFinish: true }));
      })
      .catch(() => {
        //fetch data 실패
        setFetchState((prevState) => ({ ...prevState, isError: true }));
      });
  };

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

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

export default App;

위 코드처럼 연관된 상태를 객체를 이용하여 사용할수 있습니다.

초기 상태를 객체값을 두고, 성공/로딩/에러 상태에 따라 객체 데이터를 변경하는 방법입니다.

위와같은 형태로 사용한다면 보다 선언적인 코드를 작성하여 유지보수와 코드 이해가 쉽게 이루어질수 있습니다.

상태를 만들때 항상 1:1 의 상태를 만들어서 사용할 필요는 없습니다. loading, finish, error 를 각각 상태를

만들어서 사용하기 보다는, 하나의 객체로 묶어 사용하는 편이 상태를 관리하기 쉽게 해줄 것 입니다.