import { useState } from "react";

function App() {
  const [isLoading, setIsLoading] = useState(false);
  const [isFinish, setIsFinish] = useState(false);
  const [isError, setIsError] = useState(false);

  const fetchData = () => {
    //fetch Data 시도
    setIsLoading(true);

    fetch("<https://~~>")
      .then(() => {
        //fetch data 성공
        setIsFinish(true);
        setIsLoading(false);
      })
      .catch(() => {
        //fetch data 실패
        setIsError(true);
      });
  };

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

export default App;

위와 같은 코드에서 isLoading, isFinish, isError 는 서로 연관을 가지고 있는 상태입니다.

fetch data가 성공하면 isLoading 은 false가 되고 isFinish는 true가 되어야 합니다.

이렇게 얽혀있는 상태를 제어할때 3가지 상태가 존재한다면 관리가 어려워지며 휴면에러가

발생할 확률도 생깁니다.

이러한 경우 한가지 상태로 간단하게 제어할수 있습니다.

import { useState } from "react";

const FETCH_STATUS = {
  INIT: "init",
	LOADING:"loading",
  FINISH: "finish",
  ERROR: "error",
};

function App() {
  const [fetchStatus, setFetchStatus] = useState(FETCH_STATUS.INIT);

  const fetchData = () => {
    //fetch Data 시도
    setFetchStatus(FETCH_STATUS.LOADING);

    fetch("<https://~~>")
      .then(() => {
        //fetch data 성공
        setFetchStatus(FETCH_STATUS.FINISH);
      })
      .catch(() => {
        //fetch data 실패
        setFetchStatus(FETCH_STATUS.ERROR);
      });
  };

  return (
    <div>
      {fetchStatus === FETCH_STATUS.LOADING && "로딩중"}
      {fetchStatus === FETCH_STATUS.FINISH && "data 불러오기 성공"}
      {fetchStatus === FETCH_STATUS.ERROR && "에러"}
    </div>
  );
}

export default App;

위 코드처럼 FETCH_STATUS 라는 객체를 하나 만들고 하나의 상태에 넣어줍니다.

그리고 fetchData 함수에서 해당 상태에따라서 문자열로 상태를 업데이트 해줍니다.

이러한 형태로 관리하면 불필요한 상태를 줄이고 휴먼에러 없이 관리할수 있습니다.