React의 동시성 기능 (Concurrent Features)

 

관련글

• 가상돔(Virtual DOM)과 React Fiber 구조

 

React의 동시성 기능 (Concurrent Features)

기존 렌더링 방식보다 부드럽고 반응성 높은 사용자 경험을 제공하기 위해 도입된 새로운 렌더링 아키텍처이다.

리액트 18 이후부터는 기본적으로 일부 기능이 내장되어있다.

 

핵심은 느린 컴포넌트 때문에 전체 앱이 버벅이는 현상을 줄이기 위함이고, 

그렇기 때문에 리액트가 렌더링을 중단하고 나중에 이어서 재개할 수 있는 기능들을 제공하게되었다.

주요 기능으로는 startTransition, useDeferredValue, Suspense, streaming SSR등이 있다.

 

기존 렌더링과의 차이

기존에는 렌더링이 동기적으로 한번에 진행되었다. 따라서 무거운 업데이트가 렌더링되어야할때 UI가 멈추는 등의 문제를 겪을 수 있다.

렌더링이 멈추면 사용자가 인터랙션도 할 수 없으므로 안 좋은 사용자 경험을 만든다.

이제는 동시성 기능의 핵심 기능으로 이러한 문제점을 해결할 수 있다. 

 

리액트의 동시성 렌더링은 아래와 같은 처리 과정을 거치게된다.

1. 할 일 있음 → 렌더링 시작
2. 너무 오래 걸리면? → 멈춤
3. 사용자 이벤트 처리 먼저 → 나중에 렌더 재개
4. 필요한 최소한만 먼저 그리기 (ex: Suspense fallbacks)

 

주요 기능

startTransition 

UI가 응답성을 유지하면서 비우선순위 렌더링 처리할 수 있게 한다.

import { startTransition } from 'react';

function handleChange(e) {
  const value = e.target.value;
  startTransition(() => {
    setSearchTerm(value); // 비우선 업데이트
  });
}

 

 

useDeferredValue

빠른 입력 값을 즉시 반영하고 느린 필터링이나 검색은 나중에 반영한다.

const deferredQuery = useDeferredValue(query);
const results = useMemo(() => filter(data, deferredQuery), [deferredQuery]);

 

 

Suspense + lazy

데이터를 기다리는 동안 fallback을 보여준다.

 

 

결론

Nextjs 13과 14에서는 app/ 디렉토리에서 ServerComponents, Suspense, loading.tsx, ErrorBoundary등은 모두 동시성 기반으로 작동된다. 리액트 18 이후 부터는 기본 렌더링 엔진이 concurrent로 변경되어 따로 온셥을 넣을 필요가 없다.

동시성은 복잡도를 높일 수 있기에 startTransition, Suspense, useDeferredValue 등의 API는 필요한 곳에 부분적으로 사용하는게 좋다.