ReactJS 디자인 패턴 ~State Machine Pattern~

Source: Dev.to

개요

State Machine Pattern은 React 코드베이스를 읽기 쉽고, 유지보수가 용이하며, 생산성을 높이는 데 도움이 됩니다. 여러 개의 불리언 상태 변수를 관리하는 대신, 단일 status 변수 하나로 컴포넌트의 상태를 표현할 수 있어 상태 관리가 단순해지고 불가능한 조합(예: 로딩 중이면서 동시에 오류 상태인 경우)을 방지할 수 있습니다.

Before

function App() {
  const [error, setError] = useState(true);
  const [loading, setLoading] = useState(false);
  const [ready, setReady] = useState(false);

  const handleNextState = () => {
    if (status === "ready") {
      setLoading(true);
      setReady(false);
      setError(false);
    } else if (status === "loading") {
      setError(true);
      setReady(false);
      setLoading(false);
    } else if (status === "error") {
      setReady(true);
      setError(false);
      setLoading(false);
    }
  };

  return (
    
      
## State Machine Pattern

      Next State

      {loading && 
Loading...
}
      {error && 
Something went wrong!
}
      {ready && 
Ready to go!
}
    
  );
}

상태 머신 패턴

      Next State

      {loading && 
Loading...
}
      {error && 
Something went wrong!
}
      {ready && 
Ready to go!
}

적용 후

function App() {
  const [status, setStatus] = useState('ready');

  const handleNextState = () => {
    if (status === "ready") {
      setStatus("loading");
    } else if (status === "loading") {
      setStatus("error");
    } else if (status === "error") {
      setStatus("ready");
    }
  };

  return (
    
      
## State Machine Pattern

      Next State

      {status === "loading" && 
Loading...
}
      {status === "error" && 
Something went wrong!
}
      {status === "ready" && 
Ready to go!
}
    
  );
}