React 18의 Concurrent Mode

React 18에서 도입된 Concurrent Mode는 사용자 인터페이스를 더 빠르고 반응성 있게 만드는 새로운 기능입니다. Concurrent Mode는 React 애플리케이션이 더 나은 성능과 사용자 경험을 제공할 수 있도록 돕는 여러 가지 개선 사항과 새로운 기능을 포함합니다.

Concurrent Mode의 주요 개념

1. Interruptible Rendering (중단 가능한 렌더링):
   • 렌더링 작업을 여러 프레임에 걸쳐 분할하여, 더 중요한 작업이 있을 때 렌더링을 중단하고 다시 시작할 수 있게 합니다. 이는 사용자가 느린 작업으로 인해 UI가 멈추는 경험을 방지합니다.
     

     import { useState, useEffect } from 'react';
     
     function App() {
       const [items, setItems] = useState([]);
     
       useEffect(() => {
         let isSubscribed = true;
     	// 여기서 React는 긴 목록을 렌더링할 때
     	// UI가 멈추는 것을 방지하기 위해 렌더링을
     	// 여러 프레임에 나누어 처리할 수 있습니다.
         setTimeout(() => {
           if (isSubscribed) {
             const newItems = Array(10000).fill('item');
             setItems(newItems);
           }
         }, 3000);
     
         return () => {
           isSubscribed = false;
         };
       }, []);
     
       return (
         <div>
           {items.map((item, index) => (
             <div key={index}>{item}</div>
           ))}
         </div>
       );
     }
     
     export default App;

     
     
     
2. Scheduling (스케줄링):
   • React는 우선순위가 높은 작업을 먼저 처리하고, 덜 중요한 작업은 나중에 처리합니다. 이를 통해 중요한 업데이트가 더 빠르게 화면에 반영되도록 합니다.
     

     import { useState, useTransition } from 'react';
     
     function App() {
       const [isPending, startTransition] = useTransition();
       const [input, setInput] = useState('');
       const [list, setList] = useState([]);
     
       const handleChange = (e) => {
         setInput(e.target.value);
     	// startTransition을 사용하여 렌더링 우선순위를 낮추고
     	// 중요한 작업을 먼저 처리합니다.
         startTransition(() => {
           const newList = Array(10000).fill(e.target.value);
           setList(newList);
         });
       };
     
       return (
         <div>
           <input type="text" value={input} onChange={handleChange} />
           {isPending ? <p>Loading...</p> : null}
           <ul>
             {list.map((item, index) => (
               <li key={index}>{item}</li>
             ))}
           </ul>
         </div>
       );
     }
     
     export default App;

      
3. Suspense (서스펜스):
   • 데이터 로딩과 같은 비동기 작업을 처리하는 동안 컴포넌트를 일시 중지하고, 로딩 상태를 표시할 수 있게 합니다. Concurrent Mode에서는 더 효율적으로 비동기 작업을 처리할 수 있습니다.
     

     import React, { Suspense, useState } from 'react';
     const Profile = React.lazy(() => import('./Profile'));
     
     function App() {
       return (
         <div>
           <h1>My App</h1>
         // React.lazy와 Suspense를 사용하여 비동기적으로 컴포넌트를 로드하고,
         //로딩 상태를 표시합니다.
           <Suspense fallback={<div>Loading...</div>}>
             <Profile />
           </Suspense>
         </div>
       );
     }
     
     export default App;

      

 

주요 기능과 이점

1. 자동 배치 (Automatic Batching):
   • 여러 상태 업데이트를 한 번의 렌더링으로 배치하여 성능을 향상시킵니다. 예를 들어, 이벤트 핸들러에서 여러 상태를 업데이트할 때 각각의 업데이트마다 렌더링이 일어나지 않고, 하나의 렌더링으로 처리됩니다.
     

     import { useState } from 'react';
     
     function App() {
       const [count, setCount] = useState(0);
       const [text, setText] = useState('');
     
       const handleClick = () => {
     	// 여기서 handleClick 함수에서 두 개의 상태를 업데이트하지만,
     	// React는 이를 한 번의 렌더링으로 처리합니다.
         setCount(count + 1);
         setText('Updated!');
       };
     
       return (
         <div>
           <button onClick={handleClick}>Update</button>
           <p>{count}</p>
           <p>{text}</p>
         </div>
       );
     }
     
     export default App;

      
     
     
2. Transition (전환):
   • UI 전환 중 사용자 인터페이스가 매끄럽게 유지되도록 합니다. startTransition API를 사용하여, 상태 업데이트가 중요하지 않은 경우 낮은 우선순위로 처리하도록 지정할 수 있습니다.
     

     import { useState, useTransition } from 'react';
     
     function App() {
       const [isPending, startTransition] = useTransition();
       const [input, setInput] = useState('');
       const [list, setList] = useState([]);
     
       const handleChange = (e) => {
         setInput(e.target.value);
     	// startTransition을 사용하여 상태 업데이트가 중요하지 않은 경우
     	// 낮은 우선순위로 처리하도록 합니다.
         startTransition(() => {
           const newList = Array(10000).fill(e.target.value);
           setList(newList);
         });
       };
     
       return (
         <div>
           <input type="text" value={input} onChange={handleChange} />
           {isPending ? <p>Loading...</p> : null}
           <ul>
             {list.map((item, index) => (
               <li key={index}>{item}</li>
             ))}
           </ul>
         </div>
       );
     }
     
     export default App;

     
     
     
3. Suspense Improvements (서스펜스 개선):
   • 데이터 패칭과 같은 비동기 작업을 처리할 때 Suspense 컴포넌트를 사용하여 로딩 상태를 쉽게 관리할 수 있습니다. Concurrent Mode에서는 이러한 작업이 더 효율적으로 처리됩니다.