Suspense에 대하여...

1. Suspense 란?

suspense는 어떤 컴포넌트가 읽어야 하는 데이터가 아직 준비가 되지 않았다고 리엑트에서 알려주는 새로운 매커니즘이다.

 

2. Suspense를 사용하는 이유

suspense를 사용하는 이유는 2가지 정도가 있다.

 

 첫번째는 표준화이다. 리엑트에서 suspense가 나오기 전에는 컴포넌트가 비동기 데이터를 읽어오는 방법을 표준화 시켜지지 않았기에 이는 코드의 가독성과 유지보수적인 측면에서 어려움이 존재한다.

 

 두번째로는 waterfull처럼 명령 프로그래밍에 가깝다는 것이다. 이는 리엑트에서 기본적인 선언적 프로그래밍을 지원한다는 점에서 보았을 때 핀트가 맞지 않는다는 문제가 발생한다. 하지만 Suspense를 통해서 복잡한 코드는 1차적으로 보이지 않고 핵심 로직만을 보여주기 때문에 개발자 입장에서는 한눈에 파악하기 편하다는 장점 뿐만 아니라 협업에서도 유리하다는 장점이 있다.

 

//명령적 프로그래밍 방식

...
if(isLoading) return <div>loading</div>

if(isError) return <div>error</div>
...

//선언적 프로그래밍 방식
...
<Suspense fallback = {<div>loading</div>}>
	{{ data fetching code... }}
</Suspense>