React Concurrent Mode에서의 자바스크립트 컴포넌트 최적화

09 Nov 2023

reactjs

React Concurrent Mode는 React 18에서 소개된 새로운 기능으로, 애플리케이션의 성능을 개선하기 위해 도입되었습니다. 이 모드에서는 컴포넌트 렌더링이 병렬로 실행되어 더 빠른 렌더링을 가능하게 합니다. 이에 따라 자바스크립트 컴포넌트의 최적화 방법도 몇 가지 변경되었습니다.

이제 최적화를 위한 몇 가지 팁과 트릭을 살펴보겠습니다.

1. 메모이제이션(Memoization)

메모이제이션은 함수 호출 결과를 캐시하여 동일한 인수에 대한 다음 호출에서 캐시된 결과를 반환하는 것을 의미합니다. 이를 통해 불필요한 계산을 피하고 성능을 향상시킬 수 있습니다.

React Concurrent Mode에서 자바스크립트 컴포넌트를 최적화하기 위해 메모이제이션을 사용할 수 있습니다. 이를 위해 React.memo를 사용하여 컴포넌트를 래핑하면 됩니다. React.memo는 컴포넌트가 동일한 프롭스로 렌더링될 때 이전 결과를 재사용합니다.

import React from 'react';

const MyComponent = React.memo(({ prop1, prop2 }) => {
  // ...컴포넌트 내용...
});

export default MyComponent;

2. 렌더링 단계에서의 작업 분할

React Concurrent Mode에서는 렌더링 단계에서 작업을 분할하여 병렬로 처리할 수 있습니다. 이를 통해 오랜 지속시간을 가진 작업이 UI 응답성을 늦추지 않고 진행될 수 있습니다.

React.useTransition 훅을 사용하여 비동기 작업을 나눌 수 있습니다. 이를 통해 사용자에게 로딩 상태를 시각적으로 표시하고, UI 응답성을 유지할 수 있습니다.

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

function MyComponent() {
  const [isPending, startTransition] = useTransition();
  const [data, setData] = useState(null);

  const handleFetchData = () => {
    startTransition(() => {
      fetch('/api/data')
        .then(response => response.json())
        .then(data => setData(data))
        .catch(error => console.error(error));
    });
  };

  return (
    <div>
      {isPending ? '로딩 중...' : <button onClick={handleFetchData}>데이터 가져오기</button>}
      {data && <div>{data}</div>}
    </div>
  );
}

export default MyComponent;

3. 자원 해제

React Concurrent Mode에서는 컴포넌트가 중단되는 경우 자원을 해제하는 것이 중요합니다. React.useEffect 훅에서 반환된 함수를 사용하여 자원을 정리하십시오.

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    const timer = setInterval(() => {
      console.log('타이머 작동 중...');
    }, 1000);

    return () => {
      clearInterval(timer); // 컴포넌트가 중단될 때 타이머를 정리합니다.
    };
  }, []);

  return (
    <div>
      컴포넌트 내용...
    </div>
  );
}

export default MyComponent;

React Concurrent Mode의 자바스크립트 컴포넌트 최적화에 대해 알아보았습니다. 메모이제이션을 사용하여 컴포넌트 성능을 향상시키고, 렌더링 단계에서 작업을 분할하여 UI 응답성을 향상시킬 수 있습니다. 또한, 자원을 해제하는 것을 잊지마세요. 이러한 최적화 기법들을 적용하여 React Concurrent Mode의 혜택을 최대한 활용해보세요!

참고: React 공식 문서 - Concurrent Mode

#React #ReactConcurrentMode