React useFormStatus 진행률 계산기: 향상된 UX를 위한 실시간 진행률 추정

최신 웹 애플리케이션에서 양식 제출 중에 사용자에게 명확하고 즉각적인 피드백을 제공하는 것은 긍정적인 사용자 경험을 위해 매우 중요합니다. 효과적인 기술 중 하나는 실시간 진행률 계산기를 구현하여 사용자에게 데이터가 처리되고 있음을 시각적으로 확인하는 것입니다. 이는 사용자 불안감을 줄일 뿐만 아니라 참여도도 향상시킵니다. React의 `useFormStatus` 훅을 전략적인 진행률 추적과 결합하면 개발자가 정교하고 유익한 진행률 표시기를 만들 수 있습니다.

React useFormStatus 이해하기

React 18에 도입된 `useFormStatus` 훅은 `<form>` 요소의 제출 상태에 대한 정보를 제공합니다. `pending`, `data`, `action`, `error`와 같은 속성이 있는 객체를 반환합니다. React Server Components와 함께 도입된 서버 작업용으로 주로 설계되었지만, `pending` 상태는 양식이 제출되고 있는지 감지하고 진행률 표시기에 대한 업데이트를 트리거하는 데 매우 중요합니다.

useFormStatus로 기본 양식 만들기

기본 양식 예시부터 시작해 보겠습니다.

import React from 'react';
import { useFormStatus } from 'react-dom';

function MyForm() {
  const { pending } = useFormStatus();

  async function handleSubmit(formData: FormData) {
    'use server';
    // 느린 서버 작업 시뮬레이션
    await new Promise(resolve => setTimeout(resolve, 2000));
    console.log('양식이 성공적으로 제출되었습니다!');
  }

  return (
    

      
      
        {pending ? '제출 중...' : '제출'}
      
    
  );
}

export default MyForm;

이 단순화된 예제에서 `useFormStatus`는 양식이 보류 중일 때 제출 버튼을 비활성화하고 "제출 중..." 메시지를 표시하는 데 사용됩니다. 이는 사용자에게 기본적인 피드백을 제공합니다.

실시간 진행률 계산기 구현하기

더 정교한 진행률 표시기를 만들려면 양식 제출 프로세스의 진행률을 추적해야 합니다. 이는 종종 제출을 여러 단계 또는 단계로 나누는 것을 포함합니다. `useFormStatus` 자체는 세분화된 진행률 업데이트를 제공하지 않지만, 이를 사용자 정의 로직과 결합하여 이를 수행할 수 있습니다.

예시 시나리오: 파일 업로드

파일을 업로드하는 시나리오를 생각해 보겠습니다. 제출 프로세스에는 다음 단계가 포함될 수 있습니다.

1. 파일 유효성 검사.
2. 이미지 크기 조정(해당하는 경우).
3. 서버에 파일 업로드.
4. 데이터베이스 업데이트.

각 단계를 완료하는 것을 기반으로 진행률을 추정할 수 있습니다.

진행률 추적을 사용한 코드 구현

import React, { useState } from 'react';
import { useFormStatus } from 'react-dom';

function FileUploadForm() {
  const { pending } = useFormStatus();
  const [progress, setProgress] = useState(0);

  async function handleSubmit(formData: FormData) {
    'use server';
    // 유효성 검사 시뮬레이션 (20%)
    await simulateProgress(20, setProgress);
    console.log('파일 유효성 검사가 완료되었습니다.');

    // 크기 조정 시뮬레이션 (30%)
    await simulateProgress(30, setProgress);
    console.log('파일 크기 조정이 완료되었습니다.');

    // 업로드 시뮬레이션 (40%)
    await simulateProgress(40, setProgress);
    console.log('파일 업로드가 완료되었습니다.');

    // 데이터베이스 업데이트 시뮬레이션 (10%)
    await simulateProgress(10, setProgress);
    console.log('데이터베이스가 업데이트되었습니다.');

    console.log('파일이 성공적으로 업로드되었습니다!');
  }

  async function simulateProgress(percentage: number, setProgress: (value: ((prevState: number) => number) | number) => void) {
    return new Promise(resolve => {
      setTimeout(() => {
        setProgress(prevProgress => prevProgress + percentage);
        resolve(null);
      }, 500);
    });
  }

  return (
    

      
      
        {pending ? '업로드 중...' : '업로드'}
      
      {pending && (
        

          진행률: {progress}%
          
        
      )}
    
  );
}

export default FileUploadForm;

설명:

• `useState` 훅을 사용하여 0으로 초기화된 `progress` 상태를 관리합니다.
• `handleSubmit` 함수는 이제 `simulateProgress` 함수를 사용하여 `progress` 상태를 업데이트하여 파일 업로드 프로세스의 다른 단계를 시뮬레이션합니다.
• `simulateProgress` 함수는 `setTimeout`을 사용하여 비동기 작업을 시뮬레이션하고 진행률 백분율을 점진적으로 업데이트합니다. 이는 사용자에게 진행률의 시각적 표현을 생성합니다.
• 양식이 `pending` 상태인 동안 HTML5 `<progress>` 요소를 사용하여 현재 `progress` 값을 반영하는 진행률 표시줄을 표시합니다.

진행률 표시기 사용자 지정

진행률 표시기의 시각적 표현은 다양한 방식으로 사용자 지정할 수 있습니다.

• 진행률 표시줄 스타일링: CSS를 사용하여 `<progress>` 요소를 스타일링하거나 `<div>` 요소와 CSS 애니메이션을 사용하여 사용자 정의 진행률 표시줄을 만듭니다. 애플리케이션의 디자인에 맞게 브랜드 색상과 스타일링을 고려합니다.
• 텍스트 업데이트: 진행률 표시줄과 함께 "파일 유효성 검사 중...", "이미지 크기 조정 중..." 등과 같은 메시지를 표시하여 더 설명적인 업데이트를 제공합니다.
• 시각적 피드백: 애니메이션 또는 아이콘을 사용하여 시각적 피드백을 더욱 향상시킵니다. 완료 시 로딩 스피너 또는 확인 표시 애니메이션을 사용하면 사용자 경험을 향상시킬 수 있습니다.

오류 및 예외 처리

양식 제출 프로세스 중에 발생할 수 있는 오류를 처리하는 것이 중요합니다. `useFormStatus` 훅은 사용자에게 오류 메시지를 표시하는 데 사용할 수 있는 `error` 속성을 제공합니다.

import React, { useState } from 'react';
import { useFormStatus } from 'react-dom';

function ErrorHandlingForm() {
  const { pending, error } = useFormStatus();
  const [progress, setProgress] = useState(0);

  async function handleSubmit(formData: FormData) {
    'use server';
    try {
      // 유효성 검사 시뮬레이션 (20%)
      await simulateProgress(20, setProgress);
      console.log('파일 유효성 검사가 완료되었습니다.');

      // 업로드 중 오류 시뮬레이션 (50% 이후)
      if (progress >= 50) {
        throw new Error('파일 업로드에 실패했습니다.');
      }

      // 크기 조정 시뮬레이션 (30%)
      await simulateProgress(30, setProgress);
      console.log('파일 크기 조정이 완료되었습니다.');

      // 업로드 시뮬레이션 (40%)
      await simulateProgress(40, setProgress);
      console.log('파일 업로드가 완료되었습니다.');

      // 데이터베이스 업데이트 시뮬레이션 (10%)
      await simulateProgress(10, setProgress);
      console.log('데이터베이스가 업데이트되었습니다.');

      console.log('파일이 성공적으로 업로드되었습니다!');
    } catch (err: any) {
      console.error('업로드 중 오류:', err);
      //오류를 적절하게 처리합니다.
      throw err;
    }
  }

  async function simulateProgress(percentage: number, setProgress: (value: ((prevState: number) => number) | number) => void) {
    return new Promise(resolve => {
      setTimeout(() => {
        setProgress(prevProgress => prevProgress + percentage);
        resolve(null);
      }, 500);
    });
  }

  return (
    

      
      
        {pending ? '업로드 중...' : '업로드'}
      
      {pending && (
        

          진행률: {progress}%
          
        
      )}
      {error && 
오류: {error.message}
}
    
  );
}

export default ErrorHandlingForm;

중요 고려 사항:

• 오류 경계: 예기치 않은 오류를 정상적으로 처리하려면 양식을 오류 경계로 래핑합니다.
• 사용자 친화적인 메시지: 문제를 해결하는 방법에 대한 지침을 제공하여 사용자에게 명확하고 유익한 오류 메시지를 표시합니다. 기술적인 전문 용어를 피하고 실행 가능한 조언에 집중하십시오.
• 롤백: 오류가 발생하면 제출 프로세스 중에 수행된 변경 사항을 되돌리기 위한 롤백 메커니즘을 구현하는 것을 고려하십시오.

접근성 고려 사항

장애가 있는 사용자를 포함한 모든 사용자가 진행률 표시기에 액세스할 수 있는지 확인합니다.

• ARIA 속성: `aria-valuenow`, `aria-valuemin`, `aria-valuemax`와 같은 ARIA 속성을 사용하여 화면 리더에 진행률 표시줄에 대한 의미적 정보를 제공합니다.
• 충분한 대비: 시각 장애가 있는 사용자를 위해 진행률 표시줄에 충분한 색상 대비가 있는지 확인합니다.
• 키보드 탐색: 키보드를 사용하여 양식과 해당 요소가 탐색 가능한지 확인합니다.
• 포커스 관리: 특히 오류 메시지를 표시하거나 제출 프로세스를 완료할 때 적절하게 포커스를 관리합니다.

실제 예시 및 사용 사례

실시간 진행률 계산기를 사용하는 것은 다양한 시나리오에서 유용합니다.

• 대용량 파일 업로드: 비디오 또는 고해상도 이미지와 같은 대용량 파일을 업로드하는 진행률에 대한 피드백을 사용자에게 제공합니다.
• 복잡한 데이터 처리: 보고서 생성 또는 대용량 데이터 세트 분석과 같은 복잡한 데이터 처리 작업의 진행률을 사용자에게 알립니다.
• 다단계 양식: 각 단계에서 수행된 진행률을 표시하여 다단계 양식을 통해 사용자를 안내합니다.
• 전자 상거래 결제: 결제 프로세스 중에 피드백을 제공하여 사용자에게 주문이 처리되고 있음을 안심시킵니다.
• 소프트웨어 설치: 소프트웨어 설치 또는 업데이트의 진행률을 표시합니다.

예를 들어, 클라우드 스토리지 서비스는 파일 업로드 상태를 나타내기 위해 진행률 표시줄을 사용할 수 있으며, 온라인 이미지 편집기는 필터 또는 효과 적용 진행률을 표시하는 데 사용할 수 있습니다.

진행률 계산기 구현을 위한 모범 사례

• 진행률 정확하게 추정: 가능한 한 정확하게 진행률을 추정하여 사용자에게 현실적인 피드백을 제공하십시오. 예상보다 프로세스가 오래 걸리면 진행률을 과대 평가하면 실망할 수 있습니다.
• 세분화된 업데이트 제공: 진행률 표시기에 빈번하고 세분화된 업데이트를 제공하여 사용자에게 지속적인 진행률의 느낌을 줍니다.
• 진행률의 급격한 변화 방지: 사용자에게 충격을 주고 혼란을 줄 수 있으므로 진행률의 갑작스러운 변화를 피하십시오. 부드러운 전환이 바람직합니다.
• 성능 최적화: 애플리케이션의 전반적인 성능에 영향을 미치지 않도록 진행률 계산 로직의 성능을 최적화합니다.
• 철저한 테스트: 다양한 네트워크 속도와 파일 크기를 포함한 다양한 조건에서 진행률 표시기를 철저하게 테스트하여 정확하고 신뢰할 수 있는 피드백을 제공하는지 확인합니다.

useFormStatus의 진행률 추적 대안

`useFormStatus`는 기본 양식 제출 추적에 매우 뛰어나지만, 더 세분화된 진행률 제어를 위해 다른 접근 방식을 사용할 수 있습니다.

• Promise를 사용한 사용자 정의 훅: 비동기 작업(예: 파일 업로드)을 래핑하고 해당 진행률을 추적하기 위해 Promise를 사용하는 사용자 정의 React 훅을 만듭니다.
• Web Worker: 계산 집약적인 작업(예: 이미지 크기 조정)을 Web Worker로 오프로드하여 메인 스레드를 차단하지 않고 더 부드러운 진행률 업데이트를 제공합니다.
• 서버 전송 이벤트(SSE): SSE를 사용하여 백그라운드 작업의 진행률에 대한 서버에서 실시간 업데이트를 받습니다.
• WebSockets: 서버와 양방향 통신을 위해 WebSockets를 사용하여 더 복잡한 진행률 추적 및 피드백 메커니즘을 허용합니다.

결론

React의 `useFormStatus` 훅을 사용하여 실시간 진행률 계산기를 구현하는 것은 양식 제출 중에 사용자 경험을 향상시키는 데 유용한 기술입니다. 명확하고 즉각적인 피드백을 제공하면 사용자 불안감을 줄이고 참여도를 높이며 신뢰를 구축할 수 있습니다. 진행률 표시기를 구현할 때 접근성, 오류 처리 및 성능 최적화를 고려하십시오. `useFormStatus`는 간소화된 접근 방식을 제공하지만 애플리케이션의 복잡성을 기반으로 대체 진행률 추적 방법을 탐색하면 더 나은 결과를 얻을 수 있습니다. 사용자의 요구 사항과 애플리케이션의 특정 요구 사항을 신중하게 고려하여 유익하고 매력적인 진행률 표시기를 만들 수 있습니다.