React 컴포넌트에서 Promise를 리턴하기

React 19 버전부터는 React.Node를 리턴하는 Promise 역시 React.Node로 간주합니다. 이미지와 같이 응용하면, Promise를 기다리는 동안 Fallback을 보여주기 위해 추가적으로 컴포넌트를 만들 필요가 없습니다. 그냥 Promise를 직접 Suspense로 감싸면 됩니다. 물론 Promise는 캐싱되어야 합니다 (리렌더링 간에 참조 동일성을 유지해야 합니다).

 

// 컴포넌트가 Promise를 직접 리턴할 수 있습니다.
function PromiseComponent() {
	return new Promise((resolve) => setTimeout(() => resolve ('Hi!'), 1000))
}

// 다음과 같이 곧바로 Suspense로 감싸는 것도 가능합니다.
function SuspendedPromiseComponent() {
	return (
    	<Suspense fallback="loading">
        	{new Promise (...)}
	</Suspense>
    )
}

// Promise를 기다리는 동안 Fallback이 렌더링 됩니다.
// React.use()로 Promise를 사용하는 별도의 컴포넌트 없이도!

RSC(React Server Components)의 도입에 따라 Promise를 서버-클라이언트 사이에 주고받을 수 있게 되면서 흥미로운 용례가 많이 등장하네요. 어깨너머로 보고 있기만 해도 재밌습니다.

 

추가적인 논의가 궁금하시다면 Kent C. Dodds가 작성한 타래를 참고해보세요. https://x.com/kentcdodds/status/1831331288147436027