2025년 9월 13일한국어

React의 useActionState를 상태 머신과 함께 사용하여 견고하고 예측 가능한 사용자 인터페이스를 구축하세요. 복잡한 애플리케이션을 위한 액션 상태 전환 로직을 배워보세요.

React useActionState 상태 머신: 액션 상태 전환 로직 마스터하기

React의 useActionState는 비동기 상태 업데이트를 단순화하기 위해 설계된 강력한 훅으로, React 19(현재 카나리 버전)에 도입되었습니다. 특히 서버 액션을 다룰 때 유용합니다. 상태 머신과 결합하면 복잡한 UI 상호작용과 상태 전환을 우아하고 견고하게 관리할 수 있는 방법을 제공합니다. 이 블로그 게시물에서는 useActionState를 상태 머신과 함께 효과적으로 활용하여 예측 가능하고 유지보수하기 쉬운 React 애플리케이션을 구축하는 방법을 자세히 살펴보겠습니다.

상태 머신이란 무엇인가?

상태 머신은 시스템의 동작을 유한한 수의 상태와 그 상태들 간의 전환으로 설명하는 계산의 수학적 모델입니다. 각 상태는 시스템의 고유한 조건을 나타내며, 전환은 시스템이 한 상태에서 다른 상태로 이동하게 하는 이벤트를 나타냅니다. 순서도와 비슷하지만 단계 간 이동 방법에 대해 더 엄격한 규칙을 가진다고 생각할 수 있습니다.

React 애플리케이션에서 상태 머신을 사용하면 다음과 같은 여러 이점을 얻을 수 있습니다:

예측 가능성: 상태 머신은 명확하고 예측 가능한 제어 흐름을 강제하여 애플리케이션의 동작을 더 쉽게 추론할 수 있게 합니다.
유지보수성: 상태 로직을 UI 렌더링과 분리함으로써 상태 머신은 코드 구성을 개선하고 애플리케이션의 유지보수 및 업데이트를 더 쉽게 만듭니다.
테스트 용이성: 각 상태와 전환에 대한 예상 동작을 쉽게 정의할 수 있기 때문에 상태 머신은 본질적으로 테스트하기 쉽습니다.
시각적 표현: 상태 머신은 시각적으로 표현될 수 있어 다른 개발자나 이해관계자에게 애플리케이션의 동작을 전달하는 데 도움이 됩니다.

`useActionState` 소개

useActionState 훅을 사용하면 잠재적으로 애플리케이션 상태를 변경하는 액션의 결과를 처리할 수 있습니다. 서버 액션과 원활하게 작동하도록 설계되었지만, 클라이언트 측 액션에도 적용할 수 있습니다. 로딩 상태, 오류, 액션의 최종 결과를 관리하는 깔끔한 방법을 제공하여 반응성이 뛰어나고 사용자 친화적인 UI를 더 쉽게 구축할 수 있게 해줍니다.

다음은 useActionState가 사용되는 기본 예제입니다:


const [state, dispatch] = useActionState(async (prevState, formData) => {
  // 여기에 액션 로직을 작성합니다
  try {
    const result = await someAsyncFunction(formData);
    return { ...prevState, data: result };
  } catch (error) {
    return { ...prevState, error: error.message };
  }
}, { data: null, error: null });

이 예제에서:

첫 번째 인수는 액션을 수행하는 비동기 함수입니다. 이전 상태와 폼 데이터(해당하는 경우)를 받습니다.
두 번째 인수는 초기 상태입니다.
이 훅은 현재 상태와 디스패치 함수를 포함하는 배열을 반환합니다.

`useActionState`와 상태 머신 결합하기

진정한 강력함은 useActionState를 상태 머신과 결합할 때 나타납니다. 이를 통해 비동기 액션에 의해 트리거되는 복잡한 상태 전환을 정의할 수 있습니다. 간단한 전자상거래 컴포넌트가 제품 세부 정보를 가져오는 시나리오를 생각해 보겠습니다.

예제: 제품 상세 정보 가져오기

제품 상세 정보 컴포넌트를 위해 다음과 같은 상태를 정의하겠습니다:

Idle(유휴): 초기 상태. 아직 제품 상세 정보를 가져오지 않았습니다.
Loading(로딩 중): 제품 상세 정보를 가져오는 중인 상태입니다.
Success(성공): 제품 상세 정보를 성공적으로 가져온 후의 상태입니다.
Error(오류): 제품 상세 정보를 가져오는 중 오류가 발생한 경우의 상태입니다.

이 상태 머신을 객체를 사용하여 표현할 수 있습니다:


const productDetailsMachine = {
  initial: 'idle',
  states: {
    idle: {
      on: {
        FETCH: 'loading',
      },
    },
    loading: {
      on: {
        SUCCESS: 'success',
        ERROR: 'error',
      },
    },
    success: {
      type: 'final',
    },
    error: {
      on: {
        FETCH: 'loading',
      },
    },
  },
};

이것은 단순화된 표현입니다. XState와 같은 라이브러리는 계층적 상태, 병렬 상태, 가드와 같은 기능을 갖춘 더 정교한 상태 머신 구현을 제공합니다.

React 구현

이제 이 상태 머신을 React 컴포넌트에서 useActionState와 통합해 보겠습니다.


import React from 'react';
// 완전한 상태 머신 경험을 원한다면 XState를 설치하세요. 이 기본 예제에서는 간단한 객체를 사용합니다.
// import { createMachine, useMachine } from 'xstate';

const productDetailsMachine = {
  initial: 'idle',
  states: {
    idle: {
      on: {
        FETCH: 'loading',
      },
    },
    loading: {
      on: {
        SUCCESS: 'success',
        ERROR: 'error',
      },
    },
    success: {
      type: 'final',
    },
    error: {
      on: {
        FETCH: 'loading',
      },
    },
  },
};


function ProductDetails({ productId }) {
  const [state, dispatch] = React.useReducer(
    (state, event) => {
      const nextState = productDetailsMachine.states[state].on[event];
      return nextState || state; // 전환이 정의되지 않은 경우 다음 상태 또는 현재 상태 반환
    },
    productDetailsMachine.initial
  );


  const [productData, setProductData] = React.useState(null);
  const [error, setError] = React.useState(null);

  React.useEffect(() => {
    if (state === 'loading') {
      const fetchData = async () => {
        try {
          const response = await fetch(`https://api.example.com/products/${productId}`); // 여러분의 API 엔드포인트로 교체하세요
          if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
          }
          const data = await response.json();
          setProductData(data);
          setError(null);
          dispatch('SUCCESS');
        } catch (e) {
          setError(e.message);
          setProductData(null);
          dispatch('ERROR');
        }
      };
      fetchData();
    }
  }, [state, productId, dispatch]);

  const handleFetch = () => {
    dispatch('FETCH');
  };

  return (
    
      제품 상세 정보
      {state === 'idle' && }
      {state === 'loading' && 로딩 중...}
      {state === 'success' && (
        
          {productData.name}
          {productData.description}
          가격: ${productData.price}
        
      )}
      {state === 'error' && 오류: {error}}
    
  );
}

export default ProductDetails;

설명:

productDetailsMachine을 상태 머신을 나타내는 간단한 자바스크립트 객체로 정의합니다.
React.useReducer를 사용하여 머신을 기반으로 상태 전환을 관리합니다.
React의 useEffect 훅을 사용하여 상태가 'loading'일 때 데이터 가져오기를 트리거합니다.
handleFetch 함수는 'FETCH' 이벤트를 디스패치하여 로딩 상태를 시작합니다.
컴포넌트는 현재 상태에 따라 다른 콘텐츠를 렌더링합니다.

`useActionState` 사용하기 (가상 - React 19 기능)

useActionState는 아직 정식으로 사용할 수 없지만, 사용 가능해졌을 때 구현이 어떻게 보일지, 더 깔끔한 접근 방식을 제공하는지 보여드리겠습니다:


import React from 'react';
//import { useActionState } from 'react'; // 사용 가능해지면 주석 해제

const productDetailsMachine = {
  initial: 'idle',
  states: {
    idle: {
      on: {
        FETCH: 'loading',
      },
    },
    loading: {
      on: {
        SUCCESS: 'success',
        ERROR: 'error',
      },
    },
    success: {
      type: 'final',
    },
    error: {
      on: {
        FETCH: 'loading',
      },
    },
  },
};

function ProductDetails({ productId }) {
  const initialState = { state: productDetailsMachine.initial, data: null, error: null };

  // 가상 useActionState 구현
  const [newState, dispatch] = React.useReducer(
    (state, event) => {
      const nextState = productDetailsMachine.states[state.state].on[event];
      return nextState ? { ...state, state: nextState } : state; // 전환이 정의되지 않은 경우 다음 상태 또는 현재 상태 반환
    },
    initialState
  );

  const handleFetchProduct = async () => {
    dispatch('FETCH');

      try {
        const response = await fetch(`https://api.example.com/products/${productId}`); // 여러분의 API 엔드포인트로 교체하세요
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();

        // 성공적으로 가져옴 - 데이터와 함께 SUCCESS 디스패치!
        dispatch('SUCCESS');

       // 가져온 데이터를 로컬 상태에 저장. 리듀서 내에서 디스패치 사용 불가.
       newState.data = data; // 디스패처 외부에서 업데이트

      } catch (error) {
        // 오류 발생 - 오류 메시지와 함께 ERROR 디스패치!
        dispatch('ERROR');

         // render()에서 표시될 새 변수에 오류 저장
         newState.error = error.message;
      }
    //}, initialState);
  };

  return (
    
      제품 상세 정보
      {newState.state === 'idle' && }
      {newState.state === 'loading' && 로딩 중...}
      {newState.state === 'success' && newState.data && (
        
          {newState.data.name}
          {newState.data.description}
          가격: ${newState.data.price}
        
      )}
      {newState.state === 'error' && newState.error && 오류: {newState.error}}
    
  );
}

export default ProductDetails;

중요 참고: 이 예제는 useActionState가 아직 정식으로 제공되지 않고 정확한 API가 변경될 수 있기 때문에 가상입니다. 핵심 로직 실행을 위해 표준 useReducer로 대체했습니다. 하지만, 이 예제의 의도는 useActionState가 사용 가능해졌을 때 *어떻게* 사용할 것인지를 보여주는 것이며, useReducer를 useActionState로 교체해야 합니다. 미래에 useActionState를 사용하면 이 코드는 설명된 대로 최소한의 변경으로 작동하여 비동기 데이터 처리를 크게 단순화할 것입니다.

`useActionState`를 상태 머신과 함께 사용할 때의 이점

관심사의 명확한 분리: 상태 로직은 상태 머신 내에 캡슐화되고, UI 렌더링은 React 컴포넌트에서 처리됩니다.
코드 가독성 향상: 상태 머신은 애플리케이션의 동작을 시각적으로 표현하여 이해하고 유지보수하기 더 쉽게 만듭니다.
단순화된 비동기 처리: useActionState는 비동기 액션 처리를 간소화하여 보일러플레이트 코드를 줄입니다.
향상된 테스트 용이성: 상태 머신은 본질적으로 테스트하기 쉬워 애플리케이션 동작의 정확성을 쉽게 검증할 수 있습니다.

고급 개념 및 고려사항

XState 통합

더 복잡한 상태 관리 요구사항이 있는 경우, XState와 같은 전용 상태 머신 라이브러리 사용을 고려해 보세요. XState는 계층적 상태, 병렬 상태, 가드, 액션과 같은 기능을 통해 상태 머신을 정의하고 관리하기 위한 강력하고 유연한 프레임워크를 제공합니다.


// XState 사용 예제
import { createMachine, useMachine } from 'xstate';

const productDetailsMachine = createMachine({
  id: 'productDetails',
  initial: 'idle',
  states: {
    idle: {
      on: {
        FETCH: 'loading',
      },
    },
    loading: {
      invoke: {
        id: 'fetchProduct',
        src: (context, event) => fetch(`https://api.example.com/products/${context.productId}`).then(res => res.json()),
        onDone: {
          target: 'success',
          actions: assign({ product: (context, event) => event.data })
        },
        onError: {
          target: 'error',
          actions: assign({ error: (context, event) => event.data })
        }
      }
    },
    success: {
      type: 'final',
    },
    error: {
      on: {
        FETCH: 'loading',
      },
    },
  },
}, {
  services: {
    fetchProduct: (context, event) => fetch(`https://api.example.com/products/${context.productId}`).then(res => res.json())
  }
});

이는 상태를 관리하는 더 선언적이고 견고한 방법을 제공합니다. npm install xstate를 사용하여 설치해야 합니다.

전역 상태 관리

여러 컴포넌트에 걸쳐 복잡한 상태 관리 요구사항이 있는 애플리케이션의 경우, Redux나 Zustand와 같은 전역 상태 관리 솔루션을 상태 머신과 함께 사용하는 것을 고려해 보세요. 이를 통해 애플리케이션의 상태를 중앙 집중화하고 컴포넌트 간에 쉽게 공유할 수 있습니다.

상태 머신 테스트하기

상태 머신을 테스트하는 것은 애플리케이션의 정확성과 신뢰성을 보장하는 데 매우 중요합니다. Jest나 Mocha와 같은 테스트 프레임워크를 사용하여 상태 머신에 대한 단위 테스트를 작성하고, 상태 간 전환이 예상대로 이루어지는지와 다양한 이벤트를 올바르게 처리하는지 검증할 수 있습니다.

간단한 예제는 다음과 같습니다:


// Jest 테스트 예제
import { interpret } from 'xstate';
import { productDetailsMachine } from './productDetailsMachine';

describe('productDetailsMachine', () => {
  it('should transition from idle to loading on FETCH event', (done) => {
    const service = interpret(productDetailsMachine).onTransition((state) => {
      if (state.value === 'loading') {
        expect(state.value).toBe('loading');
        done();
      }
    });

    service.start();
    service.send('FETCH');
  });
});

국제화 (i18n)

전 세계 사용자를 대상으로 애플리케이션을 구축할 때 국제화(i18n)는 필수적입니다. 상태 머신 로직과 UI 렌더링이 여러 언어와 문화적 맥락을 지원하도록 적절히 국제화되었는지 확인해야 합니다. 다음을 고려하세요:

텍스트 콘텐츠: i18n 라이브러리를 사용하여 사용자의 로케일에 따라 텍스트 콘텐츠를 번역합니다.
날짜 및 시간 형식: 로케일을 인식하는 날짜 및 시간 형식 라이브러리를 사용하여 사용자 지역에 맞는 올바른 형식으로 날짜와 시간을 표시합니다.
통화 형식: 로케일을 인식하는 통화 형식 라이브러리를 사용하여 사용자 지역에 맞는 올바른 형식으로 통화 값을 표시합니다.
숫자 형식: 로케일을 인식하는 숫자 형식 라이브러리를 사용하여 사용자 지역에 맞는 올바른 형식(예: 소수점 구분 기호, 천 단위 구분 기호)으로 숫자를 표시합니다.
오른쪽에서 왼쪽(RTL) 레이아웃: 아랍어 및 히브리어와 같은 언어를 위해 RTL 레이아웃을 지원합니다.

이러한 i18n 측면을 고려함으로써 전 세계 사용자에게 접근 가능하고 사용자 친화적인 애플리케이션을 보장할 수 있습니다.

결론

React의 useActionState를 상태 머신과 결합하는 것은 견고하고 예측 가능한 사용자 인터페이스를 구축하기 위한 강력한 접근 방식을 제공합니다. 상태 로직을 UI 렌더링과 분리하고 명확한 제어 흐름을 강제함으로써 상태 머신은 코드 구성, 유지보수성 및 테스트 용이성을 향상시킵니다. useActionState는 아직 출시 예정 기능이지만, 지금 상태 머신을 통합하는 방법을 이해하면 이 기능이 출시되었을 때 그 이점을 활용할 준비가 될 것입니다. XState와 같은 라이브러리는 훨씬 더 고급 상태 관리 기능을 제공하여 복잡한 애플리케이션 로직을 더 쉽게 처리할 수 있도록 합니다.

상태 머신과 useActionState를 채택함으로써 React 개발 기술을 한 단계 끌어올리고 전 세계 사용자에게 더 신뢰할 수 있고 유지보수하기 쉬우며 사용자 친화적인 애플리케이션을 구축할 수 있습니다.

React useActionState 상태 머신: 액션 상태 전환 로직 마스터하기

상태 머신이란 무엇인가?

useActionState 소개

useActionState와 상태 머신 결합하기