Promise + use() 예제

← use() Hook 예제로 돌아가기

🎯 핵심 포인트

• use(promise)로 Promise를 직접 읽을 수 있음
• Suspense 경계에서 자동으로 로딩 상태 처리
• Promise가 resolve되면 컴포넌트가 리렌더링
• 기존의 useEffect + useState 패턴을 단순화

사용자 선택

결과

✅ 사용자 정보

ID: 1

이름: 사용자 1

이메일: user1@example.com

💡 코드 설명

function UserProfile({ userPromise }) {
    const user = use(userPromise); // ✨ Promise를 직접 읽음
    return <div>{user.name}</div>;
}

// Suspense로 감싸면 자동 로딩 처리
<Suspense fallback={<Loading />}>
    <UserProfile userPromise={fetchUserData()} />
</Suspense>