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

좋은 코드의 예시 - 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

• 토스ㅣSLASH 21 - 프론트엔드 웹 서비스에서 우아하게 비동기 처리하기