React New API 사용(약속)

이번 게시물에서는 use를 사용하여 Promise에서 값을 읽는 방법을 시연해 보겠습니다.

모래밭

• 데모

• 코드베이스

단편

다음 코드를 확인해 보세요.

import { Suspense } from "react";

export default function Page() {
  const messagePromise = fetchMessages();

  return (
    <Suspense fallback={<p>⌛ waiting for messages...</p>}>
      <Message messagePromise={messagePromise} />
    </Suspense>
  );
}

몇 가지 참고 사항:

• <서스펜스 /> 기본적으로 대체를 표시하는 이 사용됩니다. 이 경우: ⌛ 메시지를 기다리는 중..., 약속이 해결될 때까지.

• messagePromise는 에 prop으로 전달되는 약속입니다.

이제 fetchMessages를 살펴보겠습니다.

async function fetchMessages() {
  return [
    {
      id: 1,
      text: "message 1",
    },
    {
      id: 2,
      text: "message 2",
    },
  ];
}

보시다시피 아주 간단한 기능입니다. 실제 예에서는 가져오기 요청일 수 있지만 단순화를 위해 함수는 배열만 반환합니다. 비동기를 사용하면 JavaScript는 함수가 약속을 반환한다는 것을 자동으로 인식합니다.

마지막으로 <메시지>를 확인해 보겠습니다. 구성요소:

function Message({ messagePromise }) {
  const comments = use(messagePromise);

  return comments.map((comment) => <p key={comment.id}>{comment.text}</p>);
}

이제부터 흥미로워집니다. <메시지> 컴포넌트는 앞서 언급한 것처럼 messagePromise를 prop으로 받습니다.

일반적으로 Promise와 함께 Wait를 사용하지만, React 19에서는 이제 Use를 사용하여 기본적으로 동일한 결과를 얻을 수 있습니다.

await와 use의 주요 차이점 중 하나는 wait가 promise가 해결될 때까지 렌더링을 차단하는 반면, use는 렌더링을 차단하지 않는다는 것입니다.

Promise가 해결되기 전 구성 요소의 모습은 다음과 같습니다.

그리고 약속이 해결되면:

결론

use는 wait와 유사하게 작동하며 애플리케이션이 SSR을 사용하는 서버에서 실행 중인 경우 결과는 정확히 동일합니다. 서버는 두 경우 모두 동일한 HTML 응답을 반환합니다.

그러나 코드가 클라이언트에서 실행되면 렌더링이 약간 다르게 동작합니다. wait는 약속이 해결될 때까지 렌더링을 차단하는 반면, 사용을 사용하면 약속이 해결되면 구성 요소가 다시 렌더링됩니다.

위 내용은 React New API 사용(약속)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!