React 고급 기술 익히기 - 6편: Concurrent Mode와 Fiber 아키텍처

React는 성능 최적화를 위해 Concurrent Mode(동시 모드)와 Fiber 아키텍처를 도입했습니다. 이 두 가지 기능은 React 애플리케이션이 더욱 부드럽고 빠르게 동작하도록 도와줍니다. 이번 글에서는 Concurrent Mode의 개념, Fiber 아키텍처의 구조, 그리고 React 18 이후의 주요 성능 개선 사항을 다룹니다. 🚀

---

1. Concurrent Mode란?

Concurrent Mode(동시 모드)는 React에서 UI 업데이트를 비동기적으로 처리하여 렌더링 성능을 향상시키는 기능입니다. 기존 React의 렌더링 방식은 동기적으로 이루어졌으며, 한 번 렌더링이 시작되면 끝날 때까지 멈출 수 없었습니다. 하지만 Concurrent Mode를 활성화하면 UI 응답성이 더욱 좋아지고, 중요도가 높은 작업을 먼저 처리할 수 있습니다.

✅ Concurrent Mode의 주요 장점

• 부드러운 UI 업데이트: 긴 렌더링 작업을 중단하고 더 중요한 작업을 먼저 처리
• 응답성 향상: 사용자 입력과 애니메이션이 더욱 부드러워짐
• CPU 활용 최적화: 필요할 때만 계산하여 리소스 절약

---

2. Fiber 아키텍처란?

Fiber는 React의 렌더링 엔진으로, 우선순위 기반 작업 관리와 비동기 렌더링을 가능하게 합니다.

✅ Fiber 아키텍처의 주요 특징

• 작업을 작은 단위(Fiber)로 나누어 처리
• 우선순위가 높은 작업을 먼저 실행
• 비동기 렌더링을 통해 성능 개선

Fiber와 기존 Reconciliation의 차이

특징기존 ReconciliationFiber Reconciliation

렌더링 방식	동기적 처리	비동기적 처리 가능
중단 가능 여부	불가능 (작업 완료까지 차단)	가능 (중요 작업 우선 처리)
성능 최적화	단순 비교 후 업데이트	우선순위 기반 최적화

---

3. Concurrent Mode 활성화 방법

React 18에서 기본 활성화

React 18부터 createRoot를 사용하면 Concurrent Mode가 기본적으로 활성화됩니다.

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';

const root = createRoot(document.getElementById('root'));
root.render(<App />);

 

✅ createRoot를 사용하면 Concurrent Mode가 자동 적용됩니다.

---

4. Concurrent Mode의 주요 기능

4.1 useTransition을 활용한 우선순위 조정

useTransition을 사용하면 UI의 응답성을 유지하면서 낮은 우선순위의 업데이트를 지연할 수 있습니다.

import React, { useState, useTransition } from 'react';

export default function ConcurrentComponent() {
  const [searchTerm, setSearchTerm] = useState('');
  const [filteredItems, setFilteredItems] = useState([]);
  const [isPending, startTransition] = useTransition();

  function handleChange(event) {
    setSearchTerm(event.target.value);
    startTransition(() => {
      const filtered = items.filter((item) =>
        item.includes(event.target.value)
      );
      setFilteredItems(filtered);
    });
  }

  return (
    <div>
      <input type="text" value={searchTerm} onChange={handleChange} />
      {isPending && <p>필터링 중...</p>}
      <ul>
        {filteredItems.map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

 

✅ useTransition을 사용하면 UI 입력과 무거운 연산을 분리하여 사용자 경험을 향상시킬 수 있습니다.

---

 

4.2 useDeferredValue를 활용한 지연 렌더링

 

useDeferredValue는 특정 상태 업데이트를 지연시켜 UI 응답성을 개선하는 기능입니다.

import React, { useState, useDeferredValue } from 'react';

export default function DeferredComponent() {
  const [text, setText] = useState('');
  const deferredText = useDeferredValue(text);

  return (
    <div>
      <input type="text" value={text} onChange={(e) => setText(e.target.value)} />
      <p>입력값: {deferredText}</p>
    </div>
  );
}

✅ useDeferredValue를 활용하면 렌더링 성능을 최적화하면서 최신 데이터를 유지할 수 있습니다.

---

5. Concurrent Mode 성능 최적화 전략

최적화 기법	설명
useTransition	우선순위를 조정하여 중요한 작업을 먼저 수행
useDeferredValue	값 업데이트를 지연시켜 성능 최적화
Suspense	데이터 로딩을 비동기적으로 처리하여 부드러운 UX 제공

---

결론

• Concurrent Mode는 UI 업데이트를 비동기적으로 처리하여 성능을 최적화합니다.
• Fiber 아키텍처는 우선순위 기반 렌더링을 가능하게 하여 성능을 향상시킵니다.
• useTransition, useDeferredValue 등의 훅을 활용하면 더욱 효율적인 UI 렌더링이 가능합니다.