useStreamableValue — 스트리밍 값 소비 훅

useStreamableValue — 스트리밍 값 소비 훅

useStreamableValue는 createStreamableValue로 만든 스트리밍 값을 받아 현재 값, 에러, pending 상태를 반환하는 React 훅이에요.

주의: AI SDK RSC는 현재 실험적(experimental)이에요. 프로덕션에서는 AI SDK UI를 사용하는 걸 권장해요. RSC에서 UI로 마이그레이션하는 방법은 마이그레이션 가이드를 참고하세요.

출처: 문서

본문

createStreamableValue로 만든 스트리밍 값을 받아 현재 값, 에러, pending 상태를 반환하는 React 훅이에요.

Import

import { useStreamableValue } from "@ai-sdk/rsc"

예시

컴포넌트의 props로 받은 스트리밍 값을 소비할 때 유용해요.

function MyComponent({ streamableValue }) {
  const [data, error, pending] = useStreamableValue(streamableValue);

  if (pending) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return <div>Data: {data}</div>;
}

API 시그니처

파라미터

createStreamableValue로 만든 스트리밍 값을 받아요.

반환값

배열을 반환해요. 첫 번째 요소는 데이터, 두 번째 요소는 스트림 중 어떤 시점에 에러가 던져지면 그 에러, 세 번째는 값이 pending인지 나타내는 불리언이에요.

더 알아보기 (Learn more)