Concurrent Mode를 사용한 React 애플리케이션 예제
React 18에서 새롭게 도입된 Concurrent Mode는 애플리케이션의 성능을 향상시키고 사용자 경험을 개선하는 데 도움을 주는 기능입니다. 이번 예제에서는 Concurrent Mode를 활용하여 React 애플리케이션의 동시성 처리를 보다 효과적으로 할 수 있는 방법에 대해 알아보겠습니다.
준비물
- Node.js 및 npm이 설치되어 있어야 합니다.
- React 18 버전 이상이 필요합니다.
Concurrent Mode로 애플리케이션 업데이트하기
먼저, 새로운 React 프로젝트를 생성합니다.
npx create-react-app concurrent-example
프로젝트 폴더로 이동한 후, React Concurrent 모드를 사용하기 위해 React를 업데이트합니다.
cd concurrent-example
npm install react@experimental react-dom@experimental
다음으로, Concurrent 모드에서 사용할 수 있는 새로운 기능인 startTransition을 사용해봅니다. 이 함수를 통해 비동기적으로 업데이트를 처리할 수 있습니다. 다음은 startTransition을 사용하여 버튼이 클릭된 후에 컴포넌트가 업데이트되도록 하는 예제입니다.
import React, { useState, unstable_startTransition as startTransition } from 'react';
function App() {
const [count, setCount] = useState(0);
const handleClick = () => {
startTransition(() => {
setCount((prevCount) => prevCount + 1);
});
};
return (
<div>
<h1>Concurrent Mode 예제</h1>
<p>Count: {count}</p>
<button onClick={handleClick}>클릭</button>
</div>
);
}
export default App;
이제 애플리케이션을 실행하고 버튼을 클릭해보면, startTransition을 사용하여 비동기적으로 상태를 업데이트하는 것을 확인할 수 있습니다.
마무리
이 예제에서는 Concurrent Mode를 사용하여 React 애플리케이션의 동시성 처리를 개선하는 방법에 대해 알아보았습니다. Concurrent Mode는 애플리케이션의 성능을 향상시키고 사용자 경험을 개선하는 데 큰 도움이 됩니다. React 18에서 Concurrent Mode를 사용해보고 애플리케이션의 성능을 향상시켜 보세요.
#react #concurrentmode