React 18의 새로운 기능들

React 18이 정식 출시되었습니다! 이번 버전에서는 많은 새로운 기능들이 추가되었는데, 그 중에서도 가장 주목할 만한 기능들을 살펴보겠습니다.

Concurrent Mode

React 18의 가장 큰 변화는 Concurrent Mode의 도입입니다. Concurrent Mode는 React가 여러 작업을 동시에 처리할 수 있게 해주는 기능으로, 사용자 경험을 크게 향상시킬 수 있습니다.

이전 버전의 React에서는 렌더링 작업이 시작되면 중단 없이 완료되어야 했습니다. 하지만 Concurrent Mode에서는 React가 렌더링 작업을 중단하고, 더 중요한 작업을 먼저 처리한 후 다시 돌아올 수 있습니다. 이를 통해 사용자 입력에 더 빠르게 반응할 수 있게 됩니다.

자동 배치 처리

React 18에서는 자동 배치 처리(Automatic Batching)가 개선되었습니다. 이전 버전에서는 React 이벤트 핸들러 내에서만 상태 업데이트가 배치 처리되었지만, 이제는 Promise, setTimeout, 네이티브 이벤트 핸들러 등 모든 상황에서 배치 처리가 가능해졌습니다.

// React 17
      setTimeout(() => {
        setCount(c => c + 1); // 리렌더링 발생
        setFlag(f => !f); // 리렌더링 발생
      }, 1000);
      
      // React 18
      setTimeout(() => {
        setCount(c => c + 1); // 리렌더링 발생하지 않음
        setFlag(f => !f); // 두 상태 업데이트가 배치 처리되어 한 번만 리렌더링 발생
      }, 1000);

Suspense 개선

React 18에서는 Suspense 컴포넌트가 크게 개선되었습니다. 이제 서버 사이드 렌더링에서도 Suspense를 사용할 수 있으며, 데이터 페칭과 코드 스플리팅을 더 효율적으로 처리할 수 있게 되었습니다.

// 데이터 로딩 중에 fallback UI를 보여줍니다.
      <Suspense fallback={<Loading />}>
        <ProfileDetails />
      </Suspense>

새로운 훅: useTransition과 useDeferredValue

React 18에서는 두 가지 새로운 훅이 추가되었습니다.

useTransition: 상태 업데이트의 우선순위를 낮추어 UI의 반응성을 유지할 수 있게 해줍니다.

const [isPending, startTransition] = useTransition();
      
      function handleClick() {
        startTransition(() => {
          // 이 상태 업데이트는 낮은 우선순위로 처리됩니다.
          setTab('photos');
        });
      }

useDeferredValue: 값의 업데이트를 지연시켜 UI의 반응성을 유지할 수 있게 해줍니다.

const deferredQuery = useDeferredValue(query);

결론

React 18은 많은 새로운 기능과 개선 사항을 제공합니다. 특히 Concurrent Mode의 도입은 React 애플리케이션의 성능과 사용자 경험을 크게 향상시킬 것으로 기대됩니다. 이러한 새로운 기능들을 적극적으로 활용하여 더 나은 웹 애플리케이션을 만들어 보세요!