React 커스텀 훅 상태 머신: 복잡한 상태 로직 추상화 마스터하기

React 애플리케이션이 복잡해질수록 상태 관리는 상당한 도전 과제가 될 수 있습니다. 전통적인 접근 방식인 useState 및 useEffect를 사용하는 것은 특히 복잡한 상태 전환 및 부수 효과를 다룰 때 엉킨 로직과 유지보수하기 어려운 코드로 빠르게 이어질 수 있습니다. 이럴 때 상태 머신, 특히 이를 구현하는 React 커스텀 훅이 도움이 될 수 있습니다. 이 글은 상태 머신의 개념을 안내하고, React에서 커스텀 훅으로 상태 머신을 구현하는 방법을 시연하며, 전 세계 사용자를 위한 확장 가능하고 유지보수 가능한 애플리케이션을 구축하는 데 제공하는 이점을 설명합니다.

상태 머신이란 무엇인가요?

상태 머신(또는 유한 상태 머신, FSM)은 유한한 수의 상태와 그 상태들 간의 전환을 정의함으로써 시스템의 동작을 설명하는 계산의 수학적 모델입니다. 흐름도와 같다고 생각할 수 있지만, 더 엄격한 규칙과 더 공식적인 정의를 가집니다. 주요 개념은 다음과 같습니다:

• 상태(States): 시스템의 다른 조건이나 단계를 나타냅니다.
• 전환(Transitions): 특정 이벤트 또는 조건에 따라 시스템이 한 상태에서 다른 상태로 이동하는 방식을 정의합니다.
• 이벤트(Events): 상태 전환을 유발하는 트리거입니다.
• 초기 상태(Initial State): 시스템이 시작되는 상태입니다.

상태 머신은 잘 정의된 상태와 명확한 전환을 가진 시스템을 모델링하는 데 탁월합니다. 실제 시나리오에서 많은 예시를 찾을 수 있습니다:

• 교통 신호등: 타이머에 의해 트리거되는 전환과 함께 빨간색, 노란색, 초록색과 같은 상태를 순환합니다. 이는 전 세계적으로 인지할 수 있는 예시입니다.
• 주문 처리: 전자상거래 주문은 "대기 중", "처리 중", "배송됨", "배달 완료"와 같은 상태를 전환할 수 있습니다. 이는 온라인 소매업에 보편적으로 적용됩니다.
• 인증 흐름: 사용자 인증 프로세스는 "로그아웃", "로그인 중", "로그인됨", "오류"와 같은 상태를 포함할 수 있습니다. 보안 프로토콜은 일반적으로 국가 간에 일관됩니다.

React에서 상태 머신을 사용하는 이유

상태 머신을 React 컴포넌트에 통합하면 몇 가지 강력한 이점을 제공합니다:

• 코드 구성 개선: 상태 머신은 상태 관리에 구조화된 접근 방식을 적용하여 코드를 더 예측 가능하고 이해하기 쉽게 만듭니다. 더 이상 스파게티 코드는 없습니다!
• 복잡성 감소: 상태와 전환을 명시적으로 정의함으로써 복잡한 로직을 단순화하고 의도하지 않은 부수 효과를 피할 수 있습니다.
• 테스트 용이성 향상: 상태 머신은 본질적으로 테스트 가능합니다. 각 상태와 전환을 테스트하여 시스템이 올바르게 동작하는지 쉽게 확인할 수 있습니다.
• 유지보수성 증가: 상태 머신의 선언적 특성은 애플리케이션이 발전함에 따라 코드를 더 쉽게 수정하고 확장할 수 있게 합니다.
• 더 나은 시각화: 상태 머신을 시각화하는 도구가 존재하여 시스템 동작에 대한 명확한 개요를 제공하고, 다양한 기술을 가진 팀 간의 협업 및 이해를 돕습니다.

React 커스텀 훅으로 상태 머신 구현하기

React 커스텀 훅을 사용하여 상태 머신을 구현하는 방법을 설명하겠습니다. idle, loading, success 세 가지 상태를 가질 수 있는 버튼의 간단한 예시를 만들 것입니다. 버튼은 idle 상태에서 시작합니다. 클릭하면 loading 상태로 전환되고, 로딩 프로세스를 시뮬레이션(setTimeout 사용)한 다음, success 상태로 전환됩니다.

1. 상태 머신 정의

먼저, 버튼 상태 머신의 상태와 전환을 정의합니다:

const buttonStateMachineDefinition = {
  initial: 'idle',
  states: {
    idle: {
      on: {
        CLICK: 'loading',
      },
    },
    loading: {
      after: {
        2000: 'success', // After 2 seconds, transition to success
      },
    },
    success: {},
  },
};

이 구성은 라이브러리 독립적인(XState에서 영감을 받았지만) 접근 방식을 사용하여 상태 머신을 정의합니다. 이 정의를 해석하는 로직은 커스텀 훅에서 직접 구현할 것입니다. initial 속성은 초기 상태를 idle로 설정합니다. states 속성은 가능한 상태(idle, loading, success)와 해당 전환을 정의합니다. idle 상태는 CLICK 이벤트가 발생할 때 loading 상태로 전환되도록 정의하는 on 속성을 가집니다. loading 상태는 after 속성을 사용하여 2000밀리초(2초) 후에 자동으로 success 상태로 전환됩니다. success 상태는 이 예시에서 최종 상태입니다.

2. 커스텀 훅 생성

이제 상태 머신 로직을 구현하는 커스텀 훅을 만들어 보겠습니다:

import { useState, useEffect } from 'react';

const useStateMachine = (stateMachineDefinition) => {
  const [currentState, setCurrentState] = useState(stateMachineDefinition.initial);
  const [context, setContext] = useState({});

  const transition = (event) => {
    const stateDefinition = stateMachineDefinition.states[currentState];
    if (stateDefinition && stateDefinition.on && stateDefinition.on[event]) {
      setCurrentState(stateDefinition.on[event]);
    }
  };

  useEffect(() => {
    const stateDefinition = stateMachineDefinition.states[currentState];
    if (stateDefinition && stateDefinition.after) {
      const timeoutKeys = Object.keys(stateDefinition.after);
      timeoutKeys.forEach(timeoutKey => {
        const timeout = parseInt(timeoutKey, 10);
        const nextState = stateDefinition.after[timeoutKey];
        const timer = setTimeout(() => {
          setCurrentState(nextState);
          clearTimeout(timer);
        }, timeout);

        return () => clearTimeout(timer); // Cleanup on unmount or state change
      });
    }
  }, [currentState, stateMachineDefinition.states]);

  return {
    currentState,
    context,
    transition,
  };
};

export default useStateMachine;

이 useStateMachine 훅은 상태 머신 정의를 인수로 받습니다. useState를 사용하여 현재 상태와 컨텍스트(컨텍스트는 나중에 설명합니다)를 관리합니다. transition 함수는 이벤트를 인수로 받아 상태 머신 정의에 정의된 전환에 따라 현재 상태를 업데이트합니다. useEffect 훅은 after 속성을 처리하여, 지정된 기간 후에 다음 상태로 자동으로 전환되도록 타이머를 설정합니다. 이 훅은 현재 상태, 컨텍스트 및 transition 함수를 반환합니다.

3. 컴포넌트에서 커스텀 훅 사용

마지막으로, React 컴포넌트에서 커스텀 훅을 사용해 보겠습니다:

import React from 'react';
import useStateMachine from './useStateMachine';

const buttonStateMachineDefinition = {
  initial: 'idle',
  states: {
    idle: {
      on: {
        CLICK: 'loading',
      },
    },
    loading: {
      after: {
        2000: 'success', // After 2 seconds, transition to success
      },
    },
    success: {},
  },
};

const MyButton = () => {
  const { currentState, transition } = useStateMachine(buttonStateMachineDefinition);

  const handleClick = () => {
    if (currentState === 'idle') {
      transition('CLICK');
    }
  };

  let buttonText = 'Click Me';
  if (currentState === 'loading') {
    buttonText = 'Loading...';
  } else if (currentState === 'success') {
    buttonText = 'Success!';
  }

  return (
    
      {buttonText}
    
  );
};

export default MyButton;

이 컴포넌트는 useStateMachine 훅을 사용하여 버튼의 상태를 관리합니다. handleClick 함수는 버튼이 클릭될 때(그리고 idle 상태일 때만) CLICK 이벤트를 디스패치합니다. 컴포넌트는 현재 상태에 따라 다른 텍스트를 렌더링합니다. 버튼은 여러 번 클릭되는 것을 방지하기 위해 로딩 중에는 비활성화됩니다.

상태 머신에서 컨텍스트 처리하기

많은 실제 시나리오에서 상태 머신은 상태 전환 전반에 걸쳐 지속되는 데이터를 관리해야 합니다. 이 데이터를 컨텍스트라고 합니다. 컨텍스트를 사용하면 상태 머신이 진행됨에 따라 관련 정보를 저장하고 업데이트할 수 있습니다.

버튼이 성공적으로 로드될 때마다 증가하는 카운터를 포함하도록 버튼 예시를 확장해 보겠습니다. 컨텍스트를 처리하도록 상태 머신 정의와 커스텀 훅을 수정할 것입니다.

1. 상태 머신 정의 업데이트

const buttonStateMachineDefinition = {
  initial: 'idle',
  context: {
    count: 0,
  },
  states: {
    idle: {
      on: {
        CLICK: 'loading',
      },
    },
    loading: {
      after: {
        2000: 'success',
      },
    },
    success: {
      entry: (context) => {
        return { ...context, count: context.count + 1 };
      },
    },
  },
};

초기 count 값 0을 가진 context 속성을 상태 머신 정의에 추가했습니다. 또한 success 상태에 entry 액션을 추가했습니다. entry 액션은 상태 머신이 success 상태로 진입할 때 실행됩니다. 현재 컨텍스트를 인수로 받아 count가 증가된 새 컨텍스트를 반환합니다. 여기서 entry는 컨텍스트를 수정하는 예시를 보여줍니다. JavaScript 객체는 참조로 전달되므로, 원본을 변경하는 대신 새로운 객체를 반환하는 것이 중요합니다.

2. 커스텀 훅 업데이트

import { useState, useEffect } from 'react';

const useStateMachine = (stateMachineDefinition) => {
  const [currentState, setCurrentState] = useState(stateMachineDefinition.initial);
  const [context, setContext] = useState(stateMachineDefinition.context || {});

  const transition = (event) => {
    const stateDefinition = stateMachineDefinition.states[currentState];
    if (stateDefinition && stateDefinition.on && stateDefinition.on[event]) {
      setCurrentState(stateDefinition.on[event]);
    }
  };

  useEffect(() => {
    const stateDefinition = stateMachineDefinition.states[currentState];

    if(stateDefinition && stateDefinition.entry){
      const newContext = stateDefinition.entry(context);
      setContext(newContext);
    }

    if (stateDefinition && stateDefinition.after) {
      const timeoutKeys = Object.keys(stateDefinition.after);
      timeoutKeys.forEach(timeoutKey => {
        const timeout = parseInt(timeoutKey, 10);
        const nextState = stateDefinition.after[timeoutKey];
        const timer = setTimeout(() => {
          setCurrentState(nextState);
          clearTimeout(timer);
        }, timeout);

        return () => clearTimeout(timer); // Cleanup on unmount or state change
      });
    }
  }, [currentState, stateMachineDefinition.states, context]);

  return {
    currentState,
    context,
    transition,
  };
};

export default useStateMachine;

useStateMachine 훅을 업데이트하여 stateMachineDefinition.context로 컨텍스트 상태를 초기화하거나, 컨텍스트가 제공되지 않으면 빈 객체로 초기화했습니다. 또한 entry 액션을 처리하기 위해 useEffect를 추가했습니다. 현재 상태에 entry 액션이 있을 때, 이를 실행하고 반환된 값으로 컨텍스트를 업데이트합니다.

3. 컴포넌트에서 업데이트된 훅 사용

import React from 'react';
import useStateMachine from './useStateMachine';

const buttonStateMachineDefinition = {
  initial: 'idle',
  context: {
    count: 0,
  },
  states: {
    idle: {
      on: {
        CLICK: 'loading',
      },
    },
    loading: {
      after: {
        2000: 'success',
      },
    },
    success: {
      entry: (context) => {
        return { ...context, count: context.count + 1 };
      },
    },
  },
};

const MyButton = () => {
  const { currentState, context, transition } = useStateMachine(buttonStateMachineDefinition);

  const handleClick = () => {
    if (currentState === 'idle') {
      transition('CLICK');
    }
  };

  let buttonText = 'Click Me';
  if (currentState === 'loading') {
    buttonText = 'Loading...';
  } else if (currentState === 'success') {
    buttonText = 'Success!';
  }

  return (
    

      
        {buttonText}
      
      
Count: {context.count}
    
  );
};

export default MyButton;

이제 컴포넌트에서 context.count에 접근하여 표시합니다. 버튼이 성공적으로 로드될 때마다 카운트가 증가합니다.

고급 상태 머신 개념

우리의 예시는 비교적 간단하지만, 상태 머신은 훨씬 더 복잡한 시나리오를 처리할 수 있습니다. 고려해야 할 몇 가지 고급 개념은 다음과 같습니다:

• 가드(Guards): 전환이 발생하기 위해 충족되어야 하는 조건입니다. 예를 들어, 사용자가 인증되었거나 특정 데이터 값이 임계값을 초과하는 경우에만 전환이 허용될 수 있습니다.
• 액션(Actions): 상태에 진입하거나 상태를 종료할 때 실행되는 부수 효과입니다. 여기에는 API 호출, DOM 업데이트 또는 다른 컴포넌트로 이벤트 디스패치 등이 포함될 수 있습니다.
• 병렬 상태(Parallel States): 여러 동시 활동이 있는 시스템을 모델링할 수 있습니다. 예를 들어, 비디오 플레이어는 재생 컨트롤(재생, 일시 정지, 중지)을 위한 상태 머신과 비디오 품질(낮음, 중간, 높음)을 관리하기 위한 다른 상태 머신을 가질 수 있습니다.
• 계층적 상태(Hierarchical States): 다른 상태 내에 상태를 중첩하여 상태 계층을 생성할 수 있습니다. 이는 많은 관련 상태를 가진 복잡한 시스템을 모델링하는 데 유용할 수 있습니다.

대안 라이브러리: XState 및 기타

우리의 커스텀 훅이 상태 머신의 기본 구현을 제공하지만, 프로세스를 단순화하고 더 고급 기능을 제공할 수 있는 몇 가지 훌륭한 라이브러리가 있습니다.

XState

XState는 상태 머신 및 상태 차트를 생성, 해석 및 실행하기 위한 인기 있는 JavaScript 라이브러리입니다. 가드, 액션, 병렬 상태 및 계층적 상태 지원을 포함하여 복잡한 상태 머신을 정의하기 위한 강력하고 유연한 API를 제공합니다. XState는 또한 상태 머신을 시각화하고 디버깅하기 위한 훌륭한 도구를 제공합니다.

다른 라이브러리

• Robot: 단순성과 성능에 중점을 둔 경량 상태 관리 라이브러리입니다.
• react-automata: React 컴포넌트에 상태 머신을 통합하도록 특별히 설계된 라이브러리입니다.

라이브러리 선택은 프로젝트의 특정 요구 사항에 따라 달라집니다. XState는 복잡한 상태 머신에 좋은 선택이며, Robot과 react-automata는 더 간단한 시나리오에 적합합니다.

상태 머신 사용을 위한 모범 사례

React 애플리케이션에서 상태 머신을 효과적으로 활용하려면 다음 모범 사례를 고려하십시오:

• 작게 시작하기: 간단한 상태 머신으로 시작하고 필요에 따라 점진적으로 복잡성을 늘리십시오.
• 상태 머신 시각화: 시각화 도구를 사용하여 상태 머신의 동작을 명확하게 이해하십시오.
• 포괄적인 테스트 작성: 각 상태와 전환을 철저히 테스트하여 시스템이 올바르게 동작하는지 확인하십시오.
• 상태 머신 문서화: 상태 머신의 상태, 전환, 가드 및 액션을 명확하게 문서화하십시오.
• 국제화(i18n) 고려: 애플리케이션이 전 세계 사용자를 대상으로 하는 경우, 상태 머신 로직과 사용자 인터페이스가 적절하게 국제화되었는지 확인하십시오. 예를 들어, 사용자의 로케일에 따라 다른 날짜 형식이나 통화 기호를 처리하기 위해 별도의 상태 머신 또는 컨텍스트를 사용하십시오.
• 접근성(a11y): 상태 전환 및 UI 업데이트가 장애가 있는 사용자에게도 접근 가능한지 확인하십시오. ARIA 속성과 의미 있는 HTML을 사용하여 보조 기술에 적절한 컨텍스트와 피드백을 제공하십시오.

결론

React 커스텀 훅과 상태 머신의 조합은 React 애플리케이션에서 복잡한 상태 로직을 관리하는 강력하고 효과적인 접근 방식을 제공합니다. 상태 전환 및 부수 효과를 잘 정의된 모델로 추상화함으로써 코드 구성을 개선하고, 복잡성을 줄이며, 테스트 용이성을 높이고, 유지보수성을 향상시킬 수 있습니다. 자신만의 커스텀 훅을 구현하든 XState와 같은 라이브러리를 활용하든, 상태 머신을 React 워크플로우에 통합하면 전 세계 사용자를 위한 애플리케이션의 품질과 확장성을 크게 향상시킬 수 있습니다.