Concurrent Mode를 활용한 자바스크립트 UI 이벤트 핸들링

09 Nov 2023

ConcurrentMode

UI 이벤트 핸들링은 모던 웹 애플리케이션에서 핵심적인 부분입니다. 사용자가 버튼을 클릭하거나 폼을 작성할 때, 이벤트 핸들러는 즉각적인 피드백을 제공해야 합니다. 그러나 많은 이벤트 핸들링 로직이 복잡해지면 성능 이슈가 발생할 수 있습니다. 이를 위해 React는 Concurrent Mode를 도입하여 자바스크립트 UI 이벤트 핸들링을 향상시켰습니다.

Concurrent Mode란?

Concurrent Mode는 React 18부터 도입된 기능으로, 애플리케이션의 다른 부분이 느리거나 중단되지 않도록 하면서 동시에 여러 작업을 처리할 수 있게 해줍니다. 이를 통해 사용자가 웹 애플리케이션에 대한 피드백을 더 빠르게 받을 수 있습니다. Concurrent Mode는 특히 복잡한 UI 이벤트 핸들링 시나리오에서 더욱 효과적으로 작동합니다.

Concurrent Mode를 활용한 이벤트 핸들링의 장점

사용자 경험 향상: Concurrent Mode는 네트워크 요청, 데이터 로딩 등 장기 실행되는 작업과 함께 UI 이벤트 핸들링을 병행할 수 있습니다. 따라서 사용자는 더 빠른 응답성을 느낄 수 있습니다.
성능 최적화: Concurrent Mode는 React가 느린 작업을 우선순위를 두고 처리할 수 있도록 하는 스케줄링 알고리즘을 제공합니다. 이로 인해 사용자 상호작용과 관련된 작업이 더 높은 우선순위를 가지고 빠르게 처리될 수 있습니다.

Concurrent Mode 사용 방법

React 버전 업데이트: Concurrent Mode를 사용하기 위해서는 React의 버전을 18로 업데이트해야 합니다.
Concurrent Mode 적용: Concurrent Mode를 활성화하려면 애플리케이션의 최상위 컴포넌트를 <React.StrictMode> 대신 <React.Suspense fallback={...}>로 감싸야 합니다.

import React from 'react';

function App() {
  return (
    <React.Suspense fallback={<Loader />}>
      {/* 애플리케이션 컴포넌트들 */}
    </React.Suspense>
  );
}

export default App;

병렬 처리 로직 구현: Concurrent Mode를 사용하여 이벤트 핸들링을 최적화하려면, 병렬 처리가 필요한 작업을 비동기 함수나 Promise를 사용하여 처리해야 합니다.

import { unstable_scheduleCallback as scheduleCallback } from 'scheduler';

function handleClick() {
  scheduleCallback(() => {
    // 병렬 처리 작업
  });
}

function MyButton() {
  return <button onClick={handleClick}>Click me</button>;
}

결론

Concurrent Mode는 자바스크립트 UI 이벤트 핸들링을 향상시키는 혁신적인 방법으로, 사용자 경험 향상과 성능 최적화에 기여합니다. React 18부터 도입된 Concurrent Mode를 적용하여 웹 애플리케이션의 이벤트 핸들링을 더욱 효율적으로 처리할 수 있습니다.

참고 자료: React Docs - Concurrent Mode
#React #ConcurrentMode