Colin's Blog
Concurrent Mode를 활용한 자바스크립트 프로파일링 및 최적화

최근에는 자바스크립트 애플리케이션의 성능과 사용자 경험을 향상시키기 위해 Concurrent Mode가 더 관심을 받고 있습니다. Concurrent Mode는 React의 새로운 기능으로, 애플리케이션의 렌더링을 더 나은 방식으로 처리하고 애니메이션, 스크롤 및 사용자 입력과 같은 인터랙션에 영향을주는 레이아웃 작동을 개선합니다.

자바스크립트 애플리케이션을 최적화하려면 프로파일링이 매우 중요합니다. 프로파일링은 애플리케이션의 성능을 평가하고 병목 현상을 찾아내는 프로세스입니다. 자바스크립트 프로파일러는 애플리케이션 실행 중에 코드 실행 시간, 함수 호출 횟수, 메모리 사용 등 다양한 지표를 기록하고 분석하여 성능 문제를 식별할 수 있습니다.

Concurrent Mode를 사용하여 자바스크립트 애플리케이션을 프로파일링하고 최적화하는 방법을 알아보겠습니다.

1. React Concurrent Mode 활성화

Concurrent Mode를 사용하려면 React v18 이상이 필요합니다. React v18은 아직 베타 버전이지만, 해당 버전을 설치하고 프로젝트에 적용해야합니다. Concurrent Mode는 기본적으로 비활성화되어 있으므로, 활성화하기 위해 몇 가지 구성 변경이 필요합니다.

import ReactDOM from 'react-dom';
import { unstable_createRoot } from 'react-dom';

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

위의 코드에서 unstable_createRoot를 사용하여 애플리케이션의 루트를 생성하고, render 메서드를 사용하여 애플리케이션을 렌더링합니다. 이렇게하면 Concurrent Mode가 활성화됩니다.

2. Performance API를 사용한 프로파일링

Performance API는 브라우저에서 제공하는 프로파일링 도구로, 애플리케이션의 성능을 측정할 수 있습니다. Performance API를 사용하려면 다음과 같은 스텝을 따르세요.

const { now, mark, measure } = performance;

mark('start');

// 애플리케이션 실행

mark('end');
measure('App', 'start', 'end');

console.log(performance.getEntriesByName('App'));

위의 코드에서는 mark 메서드로 시작과 끝을 표시하고, measure 메서드로 측정 구간을 정의합니다. 그리고 performance.getEntriesByName를 통해 해당 구간의 성능 측정 결과를 얻을 수 있습니다.

3. 리렌더링 최적화

React Concurrent Mode는 리렌더링 프로세스를 개선하는 기능을 제공합니다. 자주 변경되는 부분만 리렌더링하고 나머지 부분은 유지하여 성능을 향상시킬 수 있습니다.

Memoization 사용

memoization은 이전에 계산된 결과를 캐시하여 동일한 입력에 대한 중복 계산을 피하는 기술입니다. Memoization을 사용하면 동일한 입력에 대해 이전에 계산된 값을 재사용하여 성능을 향상시킬 수 있습니다.

import { memo } from 'react';

const MemoizedComponent = memo(Component);

위의 코드에서 memo 함수를 사용하여 컴포넌트를 메모이즈합니다. 이렇게하면 동일한 props를 가질 때 컴포넌트의 리렌더링을 방지할 수 있습니다.

React Profiler 사용

React Profiler는 애플리케이션의 렌더링 성능을 모니터링하고 분석하는 도구입니다. Concurrent Mode에서는 새로운 컴포넌트인 Profiler를 사용하여 프로파일링할 수 있습니다.

import { Profiler } from 'react';

const App = () => {
  const onRender = (id, phase, actualDuration, baseDuration, startTime, commitTime) => {
    console.log(`${id} ${phase} - actual: ${actualDuration}, base: ${baseDuration}`);
  };

  return (
    <Profiler id="App" onRender={onRender}>
      {/* 애플리케이션 컴포넌트 */}
    </Profiler>
  );
};

위의 코드에서 Profiler 컴포넌트를 사용하여 애플리케이션을 래핑하고, onRender 프로퍼티를 통해 렌더링 성능을 측정하는 콜백 함수를 정의합니다. 이렇게하면 애플리케이션의 각 렌더링 단계에서 측정된 결과를 얻을 수 있습니다.

결론

Concurrent Mode는 React 애플리케이션의 렌더링 성능을 향상시키기 위한 강력한 기능입니다. 이를 활용하여 자바스크립트 애플리케이션을 프로파일링하고 최적화하면 더 나은 사용자 경험을 제공할 수 있습니다. 프로파일링 도구를 사용하여 성능 측정하고 리렌더링을 최적화하는 방법을 익히세요. #프로파일링 #최적화

© 2018 Colin. All rights reserved.