프론트엔드 웹 서비스에서 우아하게 비동기 처리하기 w React Suspense

๑'ٮ'๑·2022년 8월 10일
0

좋은 코드의 예시 - Optional Chaining

function getBazFromX(x) {
	return x?.foo?.bar?.baz;
}

➡ 코드가 간결하다.
➡ 성공한 경우 x.foo.bar.baz 의 형태와 차이가 크지 않다.


지금까지의 비동기 처리

비동기 처리하는 부분을 정의한다.

const { data, error } = useAsyncValue(() => {
	return fetchSomething();
});
  • Promise를 반환하는 함수를 React Hook의 인자로 넘기고,
  • Promise의 상태 변화에 따라 Hook이 반환하는 data, error의 값을 적절히 채워준다.
  • React Query 라이브러리 활용

컴포넌트에서 로딩과 에러 처리를 동시에 수행한다

function Profile() {
	const foo = useAsyncValue(() => {
    	return fetchFoo(); 
    })
}

if (foo.error) return <div>로딩에 실패했습니다.</div>
if (!foo.data) return <div>로딩중입니다...</div>
return <div>{foo.data.name}님 안녕하세요!</div>
  • 성공하는 경우와 실패하는 경우가 섞여서 처리된다.
  • 실패하는 경우에 대한 처리를 외부에 위임하기 어렵다.
  • 2개 이상의 비동기 로직이 개입할 때, 비즈니스 로직을 파악하기가 어려워진다.

✨ React Suspense for Data Fetching

💡 컴포넌트는 성공한 상태만 다루고, 로딩 상태와 에러 상태는 외부에 위임 → 동기적인 코드와 큰 차이가 없도록!

function FooBar() {
	const foo = useAsyncValue(() => fetchFoo());
	const bar = useAsyncValue(() => fethBar(foo));

	return <div>{foo}{bar}</div>;
}
<ErrorBoundary fallback={<MyErrorPage />}> // Error
	<Suspense fallback={<Loader />}> // Loading
		<FooBar />
	</Suspense>
</ErrorBoundary>
  • 컴포넌트를 쓰는 쪽에서 로딩 처리와 에러 처리를 한다.
  • 일반적으로 컴포넌트 하나하나보다 적당한 부분 단위(<App />)에 한번에 감싸서 사용
  • React Query → {suspense: true} 옵션 → 자동으로 Suspense 상태가 관리된다.

🔗 Reference

profile
프론트엔드

0개의 댓글