Tagged Union 을 사용하여 상태머신 구현하기

복잡한 조건과 다양한 상태가 존재하는 UI를 개발할 때, 코드는 금방 난잡해지고 이해하기 어려워질 수 있습니다. 특히 삭제와 같은 중요한 작업을 처리할 때 상태가 명확히 관리되지 않으면 예기치 않은 오류가 발생할 가능성이 높습니다.

이러한 상황에서 유용한 도구가 바로 상태머신(State Machine)과 Tagged Union입니다.

상태머신(State Machine)이란?

상태머신은 상태(State)와 상태 간 전환(Transition)을 명확하게 정의하는 방법입니다. 각 상태가 명확히 구분되고 전환 규칙이 명확해지므로 코드를 이해하고 관리하기가 쉬워집니다.

상태머신을 Vue에서 활용한 예시

이번에 Vue로 개발한 삭제 기능에서 상태머신을 도입했으며, 이 과정에서 코드의 명확성이 크게 개선되었습니다. 예를 들어, 삭제 모달을 열 때 상태를 다음과 같이 명확하게 정의했습니다.

type DeleteModalState =
  | { isShowDeleteModal: false; sslCertificateData: undefined }
  | {
      isShowDeleteModal: true;
      sslCertificateData: { id: string; name: string };
    };

이렇게 표현하면 isShowDeleteModal이 true일 때 반드시 삭제할 데이터가 존재한다는 것을 코드상에서 명시적으로 보장할 수 있습니다.

기존 코드와 비교

이전의 코드는 다음과 같이 작성되어 있었습니다.

// 기존 코드
const sslCertificateData = ref<{ id: string; name: string }>();
const isShowDeleteModal = ref(false);

const openSslCertificateDeleteModal = () => {
  sslCertificateData.value = {
    id: detailData.value!.id,
    name: detailData.value!.name,
  };

  isShowDeleteModal.value = true;
};

기존 방식은 상태와 데이터가 별개로 관리되어 데이터가 항상 존재하는지 보장할 수 없었고, 개발자가 항상 null 체크를 신경 써야 했습니다.

반면에 상태머신과 Tagged Union을 적용한 개선된 코드는 다음과 같이 명확해졌습니다.

// 개선된 코드
const openSslCertificateDeleteModal = () => {
  sslCertificateSingleDeleteModalState.value = {
    isShowDeleteModal: true,
    sslCertificateData: {
      id: detailData.value!.id,
      name: detailData.value!.name,
    },
  };
};

이 코드에서는 isShowDeleteModal이 true일 때 데이터가 반드시 존재함이 보장되기 때문에 별도의 null 체크가 불필요합니다.

Tagged Union을 통해 얻는 장점

Tagged Union의 가장 큰 장점은 상태에 따라 데이터(payload)의 존재 여부와 형태를 명확하게 정의할 수 있다는 점입니다. 다음과 같은 이점을 제공합니다.

• 코드의 예측 가능성과 안정성을 높일 수 있습니다.
• 불필요한 조건문과 null 체크를 줄일 수 있습니다.
• 유지보수성과 확장성이 크게 향상됩니다.

결론

상태머신과 Tagged Union을 결합하면 복잡한 UI 상태 관리를 간단하게 처리할 수 있으며, 더 나아가 코드의 품질과 안정성을 높일 수 있습니다. UI 상태 관리에 어려움을 느끼고 있다면 한 번 적용해보시는 것을 추천합니다.