React 서버 액션 응답 스트리밍: 향상된 UX를 위한 점진적 폼 응답

React 서버 액션은 React 애플리케이션 내에서 서버 측 작업을 처리하는 방식에 강력한 패러다임 전환을 가져옵니다. 가장 흥미로운 기능 중 하나는 응답을 점진적으로 스트리밍하여 전체 작업이 완료되기 전에도 사용자에게 즉각적인 피드백을 제공할 수 있다는 것입니다. 이는 데이터가 사용 가능해짐에 따라 UI를 업데이트하여 더 반응적이고 매력적인 사용자 경험을 만들 수 있는 폼에 특히 유용합니다.

React 서버 액션 이해하기

서버 액션은 React 컴포넌트에서 시작되어 서버에서 실행되는 비동기 함수입니다. 기존 API 호출에 비해 여러 가지 이점을 제공합니다:

• 향상된 보안: 서버 액션은 서버에서 직접 실행되므로 민감한 데이터나 로직이 클라이언트에 노출될 위험을 줄입니다.
• 보일러플레이트 감소: 클라이언트 측에서 별도의 API 라우트와 데이터 페칭 로직이 필요 없어집니다.
• 성능 향상: 서버 사이드 렌더링(SSR)과 캐싱을 활용하여 초기 로드 시간을 단축하고 성능을 개선할 수 있습니다.
• 타입 안전성: TypeScript와 함께 사용하면 서버 액션은 종단 간 타입 안전성을 제공하여 클라이언트와 서버 간의 데이터 일관성을 보장합니다.

응답 스트리밍의 힘

기존의 폼 제출 방식은 모든 데이터를 서버로 보내고, 응답을 기다린 다음, 그에 따라 UI를 업데이트하는 과정을 포함합니다. 이는 특히 복잡한 폼이나 느린 네트워크 연결에서 지연 시간으로 느껴질 수 있습니다. 응답 스트리밍은 서버가 클라이언트로 데이터를 청크 단위로 보낼 수 있게 하여, 데이터가 사용 가능해짐에 따라 점진적으로 UI를 업데이트할 수 있게 해줍니다.

사용자 입력을 기반으로 복잡한 가격을 계산하는 폼을 상상해 보세요. 전체 계산이 완료될 때까지 기다리는 대신, 서버는 중간 결과를 클라이언트로 스트리밍하여 사용자에게 실시간 피드백을 제공할 수 있습니다. 이는 사용자 경험을 크게 향상시키고 애플리케이션이 더 반응적으로 느껴지게 만듭니다.

서버 액션으로 점진적 폼 응답 구현하기

React 서버 액션을 사용하여 점진적 폼 응답을 구현하는 예제를 살펴보겠습니다.

예제: 실시간 환율 변환기

사용자가 금액을 입력할 때 실시간 환율 업데이트를 제공하는 간단한 환율 변환기 폼을 만들어 보겠습니다.

1. 서버 액션 설정하기

먼저, 환율 변환을 처리하는 서버 액션을 정의합니다.

// server/actions.ts
'use server';

import { unstable_cache } from 'next/cache';

async function getExchangeRate(fromCurrency: string, toCurrency: string): Promise<number> {
  // 외부 API에서 환율을 가져오는 것을 시뮬레이션합니다
  console.log(`Fetching exchange rate for ${fromCurrency} to ${toCurrency}`);
  await new Promise(resolve => setTimeout(resolve, 500)); // 네트워크 지연을 시뮬레이션합니다
  if (fromCurrency === 'USD' && toCurrency === 'EUR') return 0.92;
  if (fromCurrency === 'EUR' && toCurrency === 'USD') return 1.09;
  if (fromCurrency === 'USD' && toCurrency === 'JPY') return 145;
  if (fromCurrency === 'JPY' && toCurrency === 'USD') return 0.0069;
  throw new Error(`Exchange rate not found for ${fromCurrency} to ${toCurrency}`);
}

export const convertCurrency = async (prevState: any, formData: FormData) => {
  const fromCurrency = formData.get('fromCurrency') as string;
  const toCurrency = formData.get('toCurrency') as string;
  const amount = Number(formData.get('amount'));

  try {
    if (!fromCurrency || !toCurrency || isNaN(amount)) {
      return { message: '유효한 입력값을 제공해주세요.' };
    }

    // 응답 스트리밍을 시뮬레이션합니다
    await new Promise(resolve => setTimeout(resolve, 250));
    const exchangeRate = await unstable_cache(
      async () => getExchangeRate(fromCurrency, toCurrency),
      [`exchange-rate-${fromCurrency}-${toCurrency}`],
      { tags: [`exchange-rate-${fromCurrency}-${toCurrency}`] }
    )();

    await new Promise(resolve => setTimeout(resolve, 250));
    const convertedAmount = amount * exchangeRate;

    return { message: `변환된 금액: ${convertedAmount.toFixed(2)} ${toCurrency}` };
  } catch (e: any) {
    console.error(e);
    return { message: '통화 변환에 실패했습니다.' };
  }
};

이 예제에서 `convertCurrency` 서버 액션은 환율을 가져와(지연 시간으로 시뮬레이션) 변환된 금액을 계산합니다. `setTimeout`을 사용하여 인위적인 지연을 추가하여 네트워크 지연을 시뮬레이션하고 스트리밍 효과를 보여줍니다.

2. React 컴포넌트 구현하기

다음으로, 서버 액션을 사용하는 React 컴포넌트를 만듭니다.

// app/page.tsx
'use client';

import { useState, useTransition } from 'react';
import { convertCurrency } from './server/actions';
import { useFormState } from 'react-dom';

export default function CurrencyConverter() {
  const [fromCurrency, setFromCurrency] = useState('USD');
  const [toCurrency, setToCurrency] = useState('EUR');
  const [amount, setAmount] = useState('');
  const [isPending, startTransition] = useTransition();
  const [state, formAction] = useFormState(convertCurrency, { message: '' });

  const handleSubmit = async (event: React.FormEvent) => {
    event.preventDefault();
    startTransition(() => {
      formAction(new FormData(event.target as HTMLFormElement));
    });
  };

  return (
    <div>
      <h2>실시간 환율 변환기</h2>
      <form action={handleSubmit}>
        <label htmlFor="fromCurrency">보내는 통화:</label>
        <select id="fromCurrency" name="fromCurrency" value={fromCurrency} onChange={(e) => setFromCurrency(e.target.value)}>
          <option value="USD">USD</option>
          <option value="EUR">EUR</option>
          <option value="JPY">JPY</option>
        </select>

        <label htmlFor="toCurrency">받는 통화:</label>
        <select id="toCurrency" name="toCurrency" value={toCurrency} onChange={(e) => setToCurrency(e.target.value)}>
          <option value="EUR">EUR</option>
          <option value="USD">USD</option>
          <option value="JPY">JPY</option>
        </select>

        <label htmlFor="amount">금액:</label>
        <input
          type="number"
          id="amount"
          name="amount"
          value={amount}
          onChange={(e) => setAmount(e.target.value)}
        />

        <button type="submit" disabled={isPending}>
          {isPending ? '변환 중...' : '변환'}
        </button>
      </form>
      <p>{state.message}</p>
    </div>
  );
}

주요 사항:

• 폼 상태를 관리하고 서버 액션을 호출하기 위해 `useFormState` 훅을 사용합니다.
• `useTransition`에서 오는 `isPending` 상태는 액션이 실행되는 동안 제출 버튼을 비활성화하고 "변환 중..." 메시지를 표시하여 사용자에게 피드백을 줍니다.
• `useFormState`가 반환하는 `formAction` 함수는 자동으로 폼 제출을 처리하고 서버 액션의 응답으로 상태를 업데이트합니다.

3. 점진적 업데이트 이해하기

사용자가 폼을 제출하면 `handleSubmit` 함수가 호출됩니다. 이 함수는 폼에서 `FormData` 객체를 생성하여 `formAction` 함수에 전달합니다. 그러면 서버 액션이 서버에서 실행됩니다. 서버 액션에 도입된 인위적인 지연 때문에 다음과 같은 현상을 관찰할 수 있습니다:

1. 제출 버튼이 거의 즉시 "변환 중..."으로 변경됩니다.
2. 짧은 지연(250ms) 후, 코드는 환율을 가져오는 것을 시뮬레이션합니다.
3. 변환된 금액이 계산되고 결과가 클라이언트로 다시 전송됩니다.
4. React 컴포넌트의 `state.message`가 업데이트되어 변환된 금액을 표시합니다.

이는 응답 스트리밍을 통해 데이터가 사용 가능해짐에 따라 사용자에게 중간 업데이트를 제공하여 더 반응적이고 매력적인 사용자 경험으로 이어지는 방법을 보여줍니다.

점진적 폼 응답의 이점

• 향상된 사용자 경험: 사용자에게 즉각적인 피드백을 제공하여 애플리케이션이 더 반응적이고 덜 느리게 느껴지게 합니다.
• 체감 지연 시간 감소: 중간 결과를 보여줌으로써 전체 작업 시간이 같더라도 사용자는 프로세스가 더 빠르다고 인식합니다.
• 참여도 향상: 실시간 업데이트를 제공하여 사용자의 참여를 유지하고 체감 지연으로 인한 폼 이탈을 방지합니다.
• 전환율 증가: 더 부드럽고 반응적인 사용자 경험은 특히 복잡한 폼에서 더 높은 전환율로 이어질 수 있습니다.

고급 기법

1. 즉각적인 UI 업데이트를 위한 `useOptimistic` 사용

`useOptimistic` 훅을 사용하면 서버 액션이 완료되기 전에 UI를 낙관적으로 업데이트할 수 있습니다. 이는 UI가 예상 결과를 즉시 반영하므로 훨씬 더 빠른 체감 응답 시간을 제공할 수 있습니다.

import { useOptimistic } from 'react';

function MyComponent() {
  const [optimisticState, addOptimistic] = useOptimistic(
    initialState,
    (state, newUpdate) => {
      // 업데이트를 기반으로 새 상태를 반환합니다
      return { ...state, ...newUpdate };
    }
  );

  const handleClick = async () => {
    addOptimistic({ someValue: '낙관적 업데이트' });
    await myServerAction();
  };

  return (
    <div>
      <p>{optimisticState.someValue}</p>
      <button onClick={handleClick}>업데이트</button>
    </div>
  );
}

환율 변환기 예제에서는 현재 환율을 기반으로 변환된 금액을 낙관적으로 업데이트하여 서버에서 실제 계산이 완료되기 전에 사용자에게 즉각적인 미리보기를 제공할 수 있습니다. 서버가 오류를 반환하면 낙관적 업데이트를 되돌릴 수 있습니다.

2. 오류 처리 및 폴백 메커니즘 구현

서버 액션이 실패하거나 네트워크 연결이 중단되는 경우를 처리하기 위해 강력한 오류 처리 및 폴백 메커니즘을 구현하는 것이 중요합니다. 서버 액션 내에서 `try...catch` 블록을 사용하여 오류를 잡고 클라이언트에 적절한 오류 메시지를 반환할 수 있습니다.

// server/actions.ts

export const convertCurrency = async (prevState: any, formData: FormData) => {
  // ...
  try {
    // ...
  } catch (error: any) {
    console.error(error);
    return { message: '통화 변환 중 오류가 발생했습니다. 나중에 다시 시도해주세요.' };
  }
};

클라이언트 측에서는 사용자에게 오류 메시지를 표시하고 작업을 재시도하거나 고객 지원에 문의할 수 있는 옵션을 제공할 수 있습니다.

3. 성능을 위한 환율 캐싱

외부 API에서 환율을 가져오는 것은 성능 병목 현상을 일으킬 수 있습니다. 성능을 향상시키기 위해 Redis나 Memcached와 같은 캐싱 메커니즘을 사용하여 환율을 캐시할 수 있습니다. 예제에서 사용된 Next.js의 `unstable_cache`는 내장된 캐싱 솔루션을 제공합니다. 환율이 최신 상태로 유지되도록 주기적으로 캐시를 무효화하는 것을 잊지 마세요.

4. 국제화 고려사항

전 세계 사용자를 위한 애플리케이션을 구축할 때는 국제화(i18n)를 고려하는 것이 중요합니다. 여기에는 다음이 포함됩니다:

• 숫자 서식: 다른 로케일에 맞는 숫자 서식을 사용합니다 (예: 쉼표나 마침표를 소수점 구분 기호로 사용).
• 통화 서식: 사용자의 로케일에 따라 통화 기호와 서식을 표시합니다.
• 날짜 및 시간 서식: 다른 로케일에 맞는 날짜 및 시간 서식을 사용합니다.
• 현지화: UI를 다른 언어로 번역합니다.

`Intl` 및 `react-intl`과 같은 라이브러리는 React 애플리케이션에서 i18n을 구현하는 데 도움이 될 수 있습니다.

실제 사례 및 사용 예

• 전자상거래: 사용자가 장바구니에 상품을 추가할 때 실시간 배송비 및 배송 예상 시간을 표시합니다.
• 금융 애플리케이션: 실시간 주식 시세 및 포트폴리오 업데이트를 제공합니다.
• 여행 예약: 실시간 항공권 가격 및 예약 가능 여부를 표시합니다.
• 데이터 시각화: 차트 및 그래프에 데이터 업데이트를 스트리밍합니다.
• 협업 도구: 문서 및 프로젝트에 대한 실시간 업데이트를 표시합니다.

결론

React 서버 액션 응답 스트리밍은 React 애플리케이션의 사용자 경험을 향상시키는 강력한 방법을 제공합니다. 점진적인 폼 응답을 제공함으로써 사용자의 참여를 유지하고 전환율을 높이는 더 빠르고, 더 반응적이며, 더 매력적인 폼을 만들 수 있습니다. 응답 스트리밍을 낙관적 업데이트 및 캐싱과 같은 기술과 결합하면 진정으로 뛰어난 사용자 경험을 구축할 수 있습니다.

React 서버 액션이 계속 발전함에 따라, 복잡하고 동적인 웹 애플리케이션 개발을 더욱 단순화하는 더 강력한 기능들이 등장할 것으로 기대할 수 있습니다.

더 알아보기

• Next.js 서버 액션 문서
• React 공식 문서
• Streams API

이 가이드는 React 서버 액션 응답 스트리밍과 점진적 폼 응답에 대한 적용을 포괄적으로 개괄합니다. 여기서 논의된 개념과 기술을 이해함으로써, 이 강력한 기능을 활용하여 더 빠르고, 더 반응적이며, 더 매력적인 웹 애플리케이션을 구축할 수 있습니다.