상태 관리의 기술: Redux의 기본부터 실용적인 사용법까지

Redux는 JavaScript 애플리케이션에서 상태 관리를 위한 인기 있는 라이브러리입니다. 특히 React와 함께 많이 사용되지만, React에 국한되지 않고 다른 프레임워크나 라이브러리와도 함께 사용할 수 있습니다.

 

Redux 소개

Redux의 핵심 개념:

1. Store: 애플리케이션의 상태를 저장하는 곳입니다. 전체 애플리케이션은 하나의 스토어를 사용합니다.
2. Action: 상태 변화를 일으키는 이벤트입니다. 객체 형태로 표현되며, type 속성을 반드시 가지고 있어야 합니다.
3. Reducer: 액션에 의해 상태가 어떻게 변경되어야 할지를 정의하는 함수입니다. 이전 상태와 액션을 받아 새 상태를 반환합니다.

Redux의 작동 원리:

• 애플리케이션의 데이터(상태)는 중앙의 스토어에 저장됩니다.
• 상태를 변경하기 위해 액션을 발행(dispatch)합니다.
• 리듀서는 주어진 액션에 따라 새로운 상태를 계산하여 반환합니다.
• 스토어는 리듀서에 의해 반환된 새 상태를 저장합니다.

Redux 사용 방법

1. 설치:

npm install redux react-redux

 

2. 액션 정의: 액션은 상태 변경을 위한 정보를 담은 객체입니다.

// actions.js
export const increment = () => ({
  type: 'INCREMENT'
});

export const decrement = () => ({
  type: 'DECREMENT'
});

 

3. 리듀서 생성: 리듀서는 현재 상태와 액션을 받아 새로운 상태를 반환합니다.

// reducer.js
const initialState = { count: 0 };

function counterReducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

export default counterReducer;

 

4. 스토어 생성: 스토어는 애플리케이션의 전체 상태를 보유합니다.

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

const store = createStore(counterReducer);

export default store;

 

5. React 컴포넌트에서 사용: react-redux의 Provider를 사용하여 스토어를 React 컴포넌트에 연결합니다.

// 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}>
      <Counter />
    </Provider>
  );
}

 

6. connect() 또는 Hooks 사용: connect() 함수나 useSelector와 useDispatch 훅을 사용하여 React 컴포넌트에서 Redux 상태와 액션을 사용합니다.

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

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

  return (
    <div>
      <button onClick={() => dispatch(decrement())}>-</button>
      <span>{count}</span>
      <button onClick={() => dispatch(increment())}>+</button>
    </div>
  );
}

 

이것은 Redux를 사용하는 기본적인 예시입니다. 실제 애플리케이션에서는 더 복잡한 상태 관리 로직, 미들웨어, 비동기 작업 등을 포함할 수 있습니다.