Concurrent Rendering (2)

개요

1. useDifferedValue, useTransition 이들의 공통점과 차이점
   (+debounce)

useDifferedValue, useTransition의 공통점은 비싼 렌더링 연산에 대한 문제를 해결할 때 사용한다. 차이점이 궁금하다면 본문을 읽어보자.

2. Suspense

Suspense는 비싼 렌더링 연산의 fallback rendering을 효과적으로 처리할 수 있도록 돕는 도구다. 자세한 내용은 본문에..

본문

기본적으로 리액트(Concurrent 하지 않은)는 간단한 렌더링 연산과 비싼 렌더링 연산, 예를 들어 인풋값이 변경되는 연산과 해당 인풋으로 인해 복잡한 리스트가 렌더링되는 연산, 이 함께 일어날 때 해당 작업들의 중요도를 동일하게 여긴다.

문제는 비교적 간단한 연산에 해당하는 유저가 입력한 인풋값을 업데이트 하는 렌더링이 복잡한 리스트 렌더링에 우선순위가 밀리게 될 때 일어난다. 우선순위에서 밀려나있는 작업이기 때문에 유저 인풋이 업데이트되지 않고 버벅거리게 되고 유저 입장에서는 '왜 이렇게 느려?' 가 된다.

카페로 비유하자면 뒤에서 음료를 만드느라 (복잡한 연산) 주문 대기줄을 처리하지 못하는 현상과 비슷하다고 생각해볼 수 있다. 손님 입장에서는 음료를 만드는 일과 관계 없이 지금 내 앞에 아무 인터랙션이 없기 때문에 불쾌한 감정을 느낄 수 있다.

여기에서 useDifferedValue가 등장한다. 'differ' 는 미루다, 연기하다 라는 의미이다. 비싼 렌더링 연산을 잠시 미루고 유저 인터랙션과 관련된 렌더링을 먼저 처리하는 것이다.

useDifferedValue와 useTransition의 사용법과 차이점은 다른 아티클에서 알아보도록 하자.

그렇다면 Suspense는 무엇인가? 오히려 위에 소개한 두 API 보다는 더 부차적인 도구에 가까운 느낌인데, 위에서 이야기한 API들이 복잡한 연산을 처리하는 와중에 다른 가벼운 일처리를 우선순위로 둘 수 있도록 돕는 것들이라면 (말 그대로 Concurrent 하게 일처리(=렌더링)를 수행할 수 있도록) Suspense는 이렇게 복잡한 연산이 처리되는 동안 fallback component를 렌더링할 수 있는 기능을 제공한다.

예 1.1 - Suspense를 사용하지 않았을 때..

function Page () {
	return (
    	<Container>
        	<ComponentA />
			<ComponentB />
        </Container>
    );
}

function ComponentA () {
  	const { data } = fetchData();
  
  	if (!data) return <Loading />;
  
	return (
    	<Container>{data}</Container>
    );
}

function ComponentB () {
	const { data } = fetchData();
  
  	if (!data) return <Loading />;
  
	return (
    	<Container>{data}</Container>
    );
}

예 1.2 - Suspense를 사용했을 때!

function Page () {
	return <Suspense fallback={<Loading />}>
		<ComponentA />
      	<ComponentB />
    </Suspense>;
}

// 각각의 컴포넌트에서 Loading 컴포넌트를 따로 렌더링하지 않아도 되기에 코드도 간결해진다.
function ComponentA () {
  	const { data } = fetchData();

	return (
    	<Container>{data}</Container>
    );
}

function ComponentB () {
	const { data } = fetchData();
  
	return (
    	<Container>{data}</Container>
    );
}

지금까지 살펴본 API들을 활용하면 Concurrent Rendering을 컴포넌트 단위로 적용시킬 수 있다. 처음에는 'Concurrent Mode' 라는 것을 만들어 비교적 한번에 적용시킬 수 있도록 업데이트 할 계획이었던 것 같지만 React18에서는 점진적으로 적용할 수 있도록 API를 제공하는 것으로 계획을 바꾸었다고 한다.

참고자료

• React v18.0 - React Blog
• The Story of Concurrent React - uidotenv, Youtube