React Concurrent Mode의 상태 저장 및 복원 전략

09 Nov 2023

reactjs

React Concurrent Mode는 애플리케이션의 경험을 향상시키기 위해 비동기적으로 컴포넌트를 렌더링하는 기능을 제공합니다. 이러한 모드에서는 서로 다른 우선 순위를 갖는 작업을 동시에 처리할 수 있기 때문에 사용자에게 빠른 응답성을 제공할 수 있습니다.

하지만 React Concurrent Mode에서는 상태의 저장 및 복원에 대한 명시적인 전략이 필요합니다. 비동기 렌더링으로 인해 컴포넌트의 상태가 변경되고 다시 렌더링되는 동안, 사용자의 입력에 따라 변경된 상태를 올바르게 유지해야 합니다.

React Concurrent Mode에서는 다음과 같은 전략을 사용할 수 있습니다.

1. Suspense와 Fallback

React Concurrent Mode에서는 Suspense와 Fallback을 사용하여 상태의 저장 및 복원을 처리할 수 있습니다. Suspense 컴포넌트는 비동기 작업의 진행 상태를 알려주는 역할을 합니다. Fallback 컴포넌트는 Suspense 컴포넌트가 로딩 중일 때 보여질 대체 내용을 정의합니다.

예를 들어, 사용자의 프로필 정보를 로딩하는 컴포넌트를 가정해봅시다. Suspense와 Fallback을 이용하여 로딩 중일 때는 로딩 스피너를 보여주고, 로딩이 완료되면 프로필 정보를 화면에 렌더링할 수 있습니다.

import React, { Suspense } from 'react';

const Profile = React.lazy(() => import('./Profile'));

function App() {
  return (
    <div>
      <Suspense fallback={<Spinner />}>
        <Profile />
      </Suspense>
    </div>
  );
}

export default App;

2. Context API를 활용한 상태 관리

Context API는 React 애플리케이션에서 전역적인 상태를 관리하기 위해 사용되는 도구입니다. React Concurrent Mode에서도 Context API를 사용하여 상태의 저장 및 복원을 처리할 수 있습니다.

import React, { createContext, useContext } from 'react';

const MyContext = createContext();

function App() {
  const [data, setData] = useState('');

  return (
    <MyContext.Provider value={{ data, setData }}>
      <div>
        <Profile />
      </div>
    </MyContext.Provider>
  );
}

function Profile() {
  const { data, setData } = useContext(MyContext);

  return (
    <div>
      <input
        type="text"
        value={data}
        onChange={(e) => setData(e.target.value)}
      />
      <p>{data}</p>
    </div>
  );
}

export default App;

위의 예시에서는 MyContext를 생성하고 data를 상태로 관리합니다. Profile 컴포넌트에서 MyContext를 사용하여 data 값을 읽고 업데이트할 수 있습니다.

React Concurrent Mode에서는 위와 같은 방법을 사용하여 상태를 저장하고 복원할 수 있습니다. Suspense와 Fallback, Context API와 같은 기능을 조합하여 애플리케이션의 상태를 관리하면서 최적의 사용자 경험을 제공할 수 있습니다.

이 글은 예시로서 React Concurrent Mode에서의 상태 저장 및 복원 전략을 소개한 것이며, React 공식 문서와 관련 블로그 포스트를 참고하여 더 자세한 내용을 확인할 수 있습니다.

참고 자료:

#테크블로그 #React