React 18 Suspense 정리

React Conference 2021에서 가장 강조되었던 Suspense에 대해 정리해보았다.

예를 들어 페이지 번호에 따라 머릿글과 목록을 보여주는 화면이 있다고 가정해보자.

function Header({pageId}) {
	const [data, isLoading] = useData(pageId);
  
  	if(isLoading) {
  		return <Spinner />;
  	}
  
  	return <h1>{data}</h1>
}

function List({pageId}) {
	const [items, isLoading] = useData(pageId);
  
  	if(isLoading) {
  		return <Spinner />;
  	}
  
  	return items[pageId].map(item => <li>{items}</li>  	
}

<Header pageId={pageId} />
<List pageId={pageId} />         

일반적으로 위와 같은 코드로 많이 작성할텐데, 이런 경우 로딩에 따른 <Spinner /> 가 Header와 List에 각각 따로 동작한다. 이런 경우가 문제가 된다면 Header와 List Component를 결합해야 하거나 State를 이용해 복잡한 코드를 작성해야 한다.

여기서 새롭게 추가된 Suspense 기능을 이용할 수 있는데 먼저 코드를 보면 아래와 같이 수정된다.

<Suspense fallback={<Spinner />}>
	<Header pageId={pageId} />
	<List pageId={pageId} />
</Suspense>

자식 요소들을 Suspense로 감싸고 fallback prop에 Loading 중일 때 보여줄 화면을 설정한다. 자식 요소들도 아래와 같이 수정한다.

function Header({pageId}) {
	const data = useData(pageId); 
  
  	return <h1>{data}</h1>
}

function List({pageId}) {
	const items = useData(pageId);
  
  	return items[pageId].map(item => <li>{items}</li>  	
}

불필요해진 isLoading 코드가 지워지고 코드가 더 깔끔해진 모습을 볼 수 있다.
Suspense의 주요 개념은 '데이터 얻기'와 'Loading 상태'를 분리하는 것에서 시작한다.
Loading 상태를 분리하여 이를 부모에서 컨트롤한다.

이 Suspense 의 더 혁신적인 기능은 SSR (Server Side Rendering)에서도 적용된 다는 것이다. 기존 SSR의 단점은 HTML을 모두 렌더링을 하고 Javascript를 배치 (Hybernate) 한다. SSR이 더 나은 사용자 경험을 위해 필요한 개념이긴 하지만 이것이 문제되는 경우가 존재한다. DOM의 일부 요소를 렌더링하는데 큰 리소스를 필요로하는 경우이다. 이 경우 사용자가 첫 화면을 보기까지 더 많은 시간을 필요로 한다. 그래서 부분적으로는 서버에서 렌더링하고 나머지는 클라이언트에서 렌더링하는 방식이 필요한데, Suspense를 이용하면 매우 쉽게 할 수 있다.