React Concurrent Mode는 애플리케이션의 성능을 향상시키는 데 중점을 둔 React의 새로운 기능입니다. 이 모드는 네트워크 요청, 데이터 가져오기 및 복잡한 계산과 같은 작업을 처리하는 동안 애플리케이션의 사용자 인터페이스가 응답성을 유지할 수 있도록 도와줍니다.

React Concurrent Mode는 자바스크립트 캐시 전략을 사용하여 애플리케이션의 성능을 향상시킵니다. 캐싱은 이전에 계산된 결과를 재사용함으로써 불필요한 계산을 피하는 방법입니다. Concurrent Mode에서 자바스크립트 캐시를 사용하면 렌더링 과정에서 이전에 계산된 결과를 저장하고, 해당 결과가 필요한 경우 다시 계산하지 않고 재사용할 수 있습니다.

React Concurrent Mode의 자바스크립트 캐시 전략은 크게 두 가지로 나눌 수 있습니다. 첫 번째는 쓰기 불가능한 데이터의 캐싱, 두 번째는 쓰기 가능한 데이터의 캐싱입니다.

쓰기 불가능한 데이터의 캐싱

쓰기 불가능한 데이터의 캐싱은 컴포넌트 함수에서 캐싱을 사용하여 계산 결과를 저장하는 방식입니다. 이전에 계산된 결과가 있으면, 그 결과를 사용하여 다시 계산하지 않고 재사용합니다.

import { unstable_useCacheRefresh as useCacheRefresh } from 'react';

function MyComponent() {
  const cacheRefresh = useCacheRefresh();
  const cachedResult = React.useMemo(() => {
    // 캐싱되어야 할 계산 로직
    // 이전에 계산된 결과가 있는 경우에만 새로 계산하지 않고 재사용
  }, [cacheRefresh]);

  return (
    // 캐싱된 결과를 사용하는 JSX 코드
  );
}

이 코드에서 useCacheRefresh 훅은 캐시된 결과를 갱신할 때 사용됩니다. useMemo 훅을 사용하여 캐시된 결과를 계산하고, cacheRefresh를 의존성 배열에 추가하여 캐시된 결과를 갱신할 때마다 useMemo 훅 내부의 계산 로직이 실행되도록 설정합니다.

쓰기 가능한 데이터의 캐싱

쓰기 가능한 데이터의 캐싱은 React의 상태 관리 기능인 useState나 useReducer를 사용하여 컴포넌트의 상태를 관리합니다. 이전에 계산된 결과가 있는 경우, 해당 결과를 상태로 유지하고 컴포넌트가 다시 렌더링될 때마다 새로 계산하지 않고 재사용합니다.

function MyComponent() {
  const [cachedResult, setCachedResult] = React.useState(() => {
    // 캐싱되어야 할 계산 로직
    // 이전에 계산된 결과가 있는 경우에만 새로 계산하지 않고 재사용
  });

  return (
    // 캐싱된 결과를 사용하는 JSX 코드
  );
}

이 코드에서 useState 훅의 초기 상태로 캐시된 결과를 설정합니다. 이전에 계산된 결과가 없는 경우에는 초기 값이 계산되며, 이미 계산된 결과가 있는 경우에는 해당 결과를 상태로 유지합니다. 이전에 계산된 결과를 변경하는 경우에는 setCachedResult 함수를 사용합니다.

React Concurrent Mode의 자바스크립트 캐시 전략을 사용하면 애플리케이션의 성능을 향상시킬 수 있습니다. 캐싱을 사용하여 불필요한 계산을 피하고, 이전에 계산된 결과를 재사용함으로써 렌더링 속도를 높일 수 있습니다.

자세한 내용은 공식 React 문서를 참조하시기 바랍니다.

참고 문서:

• React Concurrent Mode
• React Hooks