React Concurrent Mode의 애플리케이션 상태 관리 방법

09 Nov 2023

reactjs

React Concurrent Mode는 React의 다음 버전인 18에서 도입된 새로운 기능으로, 애플리케이션의 성능을 향상시키는 데 도움을 줍니다. 상태 관리는 React 애플리케이션에서 중요한 부분이며, Concurrent Mode에서도 유지되어야 합니다. 이 글에서는 React Concurrent Mode에서의 애플리케이션 상태 관리 방법을 알아보겠습니다.

1. useState와 useEffect의 사용

React의 기본적인 상태 관리는 useState와 useEffect 훅을 사용하여 처리할 수 있습니다. useState는 컴포넌트의 상태를 정의하고 변경할 수 있는 기능을 제공합니다. useEffect는 렌더링 이후에 특정 작업을 수행할 수 있도록 해줍니다.

import { useState, useEffect } from 'react';

function App() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // 상태 변경 후에 실행할 작업
    document.title = `Count: ${count}`;
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}

2. React Context의 사용

React Context는 여러 컴포넌트 간에 상태를 공유하기 위한 방법입니다. Concurrent Mode에서도 동일하게 사용할 수 있습니다. Context.Provider를 통해 상태를 전역으로 공유하고, Context.Consumer를 통해 해당 상태를 사용하는 컴포넌트에서 접근할 수 있습니다.

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

const CountContext = createContext();

function App() {
  const [count, setCount] = useState(0);

  return (
    <CountContext.Provider value={count}>
      <div>
        <p>Count: {count}</p>
        <button onClick={() => setCount(count + 1)}>Increase</button>
        <ChildComponent />
      </div>
    </CountContext.Provider>
  );
}

function ChildComponent() {
  const count = useContext(CountContext);

  return <p>Child Count: {count}</p>;
}

3. React Redux의 사용

React Redux는 React 애플리케이션의 상태 관리를 간편하게 해주는 라이브러리입니다. Concurrent Mode에서도 여전히 React Redux를 사용할 수 있습니다. 기존의 Redux 패턴을 그대로 사용하면 됩니다.

import React from 'react';
import { createStore } from 'redux';
import { Provider, useSelector, useDispatch } from 'react-redux';

// 리덕스 상태를 정의하는 액션과 리듀서
const increase = () => ({ type: 'INCREASE' });

function countReducer(state = { count: 0 }, action) {
  switch (action.type) {
    case 'INCREASE':
      return {
        ...state,
        count: state.count + 1,
      };
    default:
      return state;
  }
}

// 스토어 생성
const store = createStore(countReducer);

function App() {
  return (
    <Provider store={store}>
      <CountComponent />
    </Provider>
  );
}

function CountComponent() {
  const count = useSelector(state => state.count);
  const dispatch = useDispatch();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => dispatch(increase())}>Increase</button>
    </div>
  );
}

React Concurrent Mode에서는 기존의 상태 관리 방식과 동일하게 useState, useEffect, React Context, React Redux 등의 방법을 사용할 수 있습니다. 이러한 방법들을 적절히 활용하여 성능 최적화와 상태 관리를 진행할 수 있습니다. 더 많은 정보를 원하는 경우, React 공식 문서를 참고하시기 바랍니다.

#React #애플리케이션상태관리