예측 가능한 UI를 위한 선택, XState 상태 머신 도입 후기

// 수정 전 코드의 일부
const [recordingStatus, setRecordingStatus] = useState<RecordingStatusType>('idle');
const isDisabledRecord = currentRecordingAnswer?.status === 'fail';

// 녹음 시작 로직
const handleRecord = useCallback(async () => {
  // ... 수많은 try-catch와 비동기 로직
}, [recordingStatus, isDisabledRecord, ...]);

const finishRecord = useCallback(async () => {
  // ... 수많은 try-catch와 비동기 로직
}, [/* ... */]);

// 녹음 완료 시 처리 로직
useEffect(() => {
  if (recordingStatus === 'finished') {
    finishRecord();
  }
  // ...
}, [recordingStatus]);

// 외부 상태 변경에 따른 UI 상태 동기화
useEffect(() => {
  if (currentRecordingAnswer?.status === 'success') {
    setRecordingStatus('idle');
  }
  // ...
}, [currentRecordingAnswer]);

// 수도 코드: useRecord.js
function useRecord() {
  const [isRecording, setIsRecording] = useState(false);
  const [audioFile, setAudioFile] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    // ... 여전히 훅 내부에서 복잡한 비동기 로직이 얽힘
  }, [isRecording]);

  // isRecording, audioFile, error 세 가지 상태의 조합을 항상 추적해야 함
  return { isRecording, audioFile, error, setIsRecording };
}

// 수도 코드: useReducer 방식
// 1. Reducer는 동기적으로 상태만 변경
const reducer = (state, action) => { /* ... */ };

function RecordButton() {
  const [state, dispatch] = useReducer(reducer, initialState);

  // 2. 비동기 로직은 결국 useEffect에서 별도로 처리해야 함
  useEffect(() => {
    if (state.status === 'initializing') {
      // ... 비동기 작업 실행 후 dispatch 호출
    }
  }, [state.status]);

  return <button onClick={() => dispatch({ type: 'RECORD_START' })}>녹음</button>;
}

// useState: '데이터의 조합'으로 상황을 추론
function CarWithUseState() {
  const [isEngineOn, setEngineOn] = useState(false);
  const [gear, setGear] = useState('P');
  const [pedal, setPedal] = useState('released');

  const handleShift = (targetGear) => {
    if (!isEngineOn) return alert('시동을 켜주세요!');
    if (pedal !== 'brake') return alert('브레이크를 밟아야 합니다!');
    setGear(targetGear);
  };
  return (
    <button
      onClick={() => handleShift('D')}
      disabled={!isEngineOn || pedal !== 'brake' || gear === 'D'}
    >
      D로 변경
    </button>
  );
}

// XState: '명시적인 상태'를 기준으로 상황을 판단
export const carMachine = createMachine({
  states: {
    idling: {
      on: {
        SHIFT: {
          target: 'driving',
          cond: ({ context }) => context.pedal === 'brake',
          actions: assign({ gear: ({ event }) => event.gear }),
        },
      },
    },
  },
});

function CarWithXState() {
  const [snapshot, send] = useMachine(carMachine);
  return (
    <button
      onClick={() => send({ type: 'SHIFT', gear: 'D' })}
      disabled={!snapshot.can({ type: 'SHIFT', gear: 'D' })}
    >
      D로 변경
    </button>
  );
}

// 리팩토링 전 RecordButton.tsx의 구조
export default function RecordButton() {
  const [recordingStatus, setRecordingStatus] = useState('idle');
  // ... 그 외 여러 상태와 Ref들

  const handleRecord = useCallback(async () => {
    // 1. 스트림 가져오기 (try-catch)
    // 2. Analyser 생성 (try-catch)
    // 3. Recorder 초기화 및 시작 (try-catch)
    // 4. GTM 이벤트 전송
    // 5. 에러 핸들링
    // ... 모든 책임이 이 함수 안에 혼재
  }, [/* 수많은 의존성 배열 */]);

  const finishRecord = useCallback(async () => {
    // 1. 녹음 중지 및 Blob 데이터 생성
    // 2. 파일 크기 체크
    // 3. FormData 생성 및 Redux로 dispatch
    // 4. GTM 이벤트 전송
    // 5. 에러 핸들링
  }, [/* 수많은 의존성 배열 */]);

  useEffect(() => { /* 녹음 상태 변경 시 */ }, [recordingStatus]);
  useEffect(() => { /* Redux 상태 변경 시 */ }, [currentRecordingAnswer]);
  // ... 그 외 아이콘 변경, 뒷정리 등을 위한 여러 useEffect
}

export const recordMachine = setup({
  // ...
  actors: {
    // 마이크 권한 획득 로직을 '액터'로 정의
    getMediaStreamAndConnectSourceNode: fromPromise(/* ... */),
    // 녹음 중지 및 파일 변환 로직을 '액터'로 정의
    stopAndGetBlob: fromPromise(/* ... */),
    // 음성 감지 로직을 '액터'로 정의
    detectSilence: fromCallback(/* ... */),
  },
  // ...
}).createMachine({
  id: 'recordButton',
  initial: 'idle',
  states: {
    // ...
    ready: {
      initial: 'waitingForRecord',
      states: {
        waitingForRecord: {
          on: { RECORD: 'gettingPermission' },
        },
        gettingPermission: {
          // 'gettingPermission' 상태에 진입하면, getMediaStream 액터를 실행
          invoke: {
            src: 'getMediaStreamAndConnectSourceNode',
            // 성공 시 'recording' 상태로 전환
            onDone: { target: 'recording', /* ... */ },
            // 실패 시 다시 'waitingForRecord' 상태로 돌아가며 에러 기록
            onError: { target: 'waitingForRecord', /* ... */ },
          },
        },
        recording: { /* ... */ },
        processing: { /* ... */ },
        uploading: { /* ... */ },
      },
    },
    failure: { type: 'final' },
  },
});

// 리팩토링 후 RecordButton.tsx
export default function RecordButton() {
  // 상태 머신을 사용. 모든 복잡한 상태는 snapshot이 관리
  const [snapshot, send] = useMachine(recordMachine);

  // ... Redux selector 등 외부 상태 연결
  // GTM 이벤트 전송과 같은 부수 효과만 처리
  useEffect(() => {
    if (snapshot.matches({ ready: 'recording' })) {
      GTMRecordingStarted(/* ... */);
    }
  }, [snapshot]);

  // Redux 스토어에 녹음 파일 전달
  useEffect(() => {
    if (snapshot.matches({ ready: 'uploading' })) {
      dispatch({ type: SEND_RECORD, payload: { /* ... */ } });
    }
  }, [snapshot, dispatch]);

  // 클릭 핸들러는 단순히 이벤트를 보낼 뿐
  const handleRecord = () => {
    if (snapshot.matches({ ready: 'recording' })) {
      send({ type: 'STOP' });
    } else if (snapshot.can({ type: 'RECORD' })) {
      send({ type: 'RECORD' });
    }
  };

  // UI 렌더링은 현재 상태(snapshot)를 확인하여 결정
  return (
    <Image
      onClick={handleRecord}
      className={clsx(
        snapshot.matches({ ready: 'recording' }) && styles.recording
      )}
    />
  );
}

// RecordButton.tsx
function RecordButton() {
  const [snapshot, send] = useMachine(recordMachine);

  // 클라이언트에서만 실행되는 useEffect 안에서 'SETUP' 이벤트를 보내
  // 브라우저 API를 사용하는 로직(settingUp 상태)을 안전하게 활성화합니다.
  useEffect(() => {
    send({ type: 'SETUP' });
  }, [send]);

  // ...
}