[React] 상태 관리 라이브러리 선택하기: Redux, Recoil 등

0️⃣ 들어가며

리액트 애플리케이션을 개발할 때 상태 관리는 매우 중요해요.
하지만 대규모 애플리케이션을 개발할 때, 특히 전역적인 상태값이 필수적으로 필요한 상황이 생기며 상태가 복잡해지면서 상태 관리를 위한 라이브러리를 사용하는 것이 좋아요.

🐸 : 이번 포스트에서는 Redux와 Recoil이라는 두 가지 제가 사용해본 상태 관리 라이브러리에 대하여 간단하게 설명해보겠습니다.

🟣 Redux

Redux는 가장 널리 사용되는 상태 관리 라이브러리 중 하나입니다.
Redux를 사용하면 애플리케이션의 상태를 트리로 관리할 수 있으며, 상태 변경을 위한 일관된 방법을 제공합니다.

Redux 사용 예시
먼저, Redux를 사용하여 간단한 카운터 애플리케이션을 만들어보겠습니다.

• 설치

Redux를 사용하기 위해 먼저 패키지를 설치해야 합니다.

npm install redux react-redux

액션 타입 정의
액션 타입을 정의합니다.

// actionTypes.js
export const INCREMENT = 'INCREMENT';

액션 생성자 정의
액션 생성자를 정의합니다.

// actions.js
import { INCREMENT } from './actionTypes';

export const increment = () => {
  return {
    type: INCREMENT,
  };
};

리듀서 정의
리듀서를 정의합니다.

// reducer.js
import { INCREMENT } from './actionTypes';

const initialState = {
  count: 0,
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case INCREMENT:
      return {
        ...state,
        count: state.count + 1,
      };
    default:
      return state;
  }
};

export default reducer;

스토어 생성
리덕스 스토어를 생성합니다.

// store.js
import { createStore } from 'redux';
import reducer from './reducer';

const store = createStore(reducer);

export default store;

컴포넌트에서 사용
Redux를 사용하여 카운터 컴포넌트를 구현합니다.

// Counter.js
import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { increment } from './actions';

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

  const handleIncrement = () => {
    dispatch(increment());
  };

  return (
    <div>
      <h2>카운터</h2>
      <p>{count}</p>
      <button onClick={handleIncrement}>증가</button>
    </div>
  );
}

export default Counter;

앱에서 스토어 연결
리액트 앱에서 스토어를 연결합니다.

// App.js
import React from 'react';
import { Provider } from 'react-redux';
import store from './store';
import Counter from './Counter';

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

export default App;

🟪 Recoil

Recoil은 Facebook에서 개발한 상태 관리 라이브러리입니다.
Redux와 달리 별도의 리듀서나 액션을 정의하지 않아도 되기 때문에 간편하게 상태를 관리할 수 있습니다.

Recoil 사용 예시
설치
Recoil을 사용하기 위해 먼저 패키지를 설치해야 합니다.

npm install recoil

상태 정의
Recoil을 사용하여 상태를 정의합니다.

// atom.js
import { atom } from 'recoil';

export const countState = atom({
  key: 'countState',
  default: 0,
});

컴포넌트에서 사용
Recoil을 사용하여 카운터 컴포넌트를 구현합니다.

// Counter.js
import React from 'react';
import { useRecoilState } from 'recoil';
import { countState } from './atom';

function Counter() {
  const [count, setCount] = useRecoilState(countState);

  const handleIncrement = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <h2>카운터</h2>
      <p>{count}</p>
      <button onClick={handleIncrement}>증가</button>
    </div>
  );
}

export default Counter;

앱에서 사용
리액트 앱에서 Recoil을 사용합니다.

// App.js
import React from 'react';
import { RecoilRoot } from 'recoil';
import Counter from './Counter';

function App() {
  return (
    <RecoilRoot>
      <div>
        <Counter />
      </div>
    </RecoilRoot>
  );
}

export default App;

결론

🐸 : 위와 같은 상태관리 라이브러리를 통해 컴포넌트 트리에서 props drilling 없이 컴포넌트 위치와 상관없이 상태를 가져올 수 있습니다.

마치 상태값을 클라우드에 저장 시켜놓고 가져오는 느낌으로
useState 훅스를 통해서 상태값을 Props로 넘기는 것이 아니라
redux 의 useSelector
recoil 의 useRecoilState와 같은 라이브러리 내의 함수를 호출하여 상태를 어느 곳에서나 불러와서 사용할 수 있습니다.

이번 포스트에서는 Redux와 Recoil이라는 두 가지 상태 관리 라이브러리를
알아보았습니다. Redux는 많은 사람들이 사용하는 널리 알려진 라이브러리이며,

Recoil은 Facebook에서 개발한 새로운 상태 관리 라이브러리입니다. 각 라이브러리는 각자의 장단점이 있으니 프로젝트의 요구 사항에 맞게 선택하여 사용하면 됩니다. 계속해서 더 많은 것을 배우고 연습하면서 여러분만의 리액트 개발 스킬을 향상시켜보세요!