리덕스로 상태 관리하기

byCode Keeper •


리덕스로 상태 관리하기


리액트 애플리케이션을 개발할 때 상태 관리는 매우 중요한 부분입니다. 특히, 규모가 커지고 컴포넌트 간의 상태 공유가 필요할 때는 더욱 그렇습니다. 리덕스(Redux)는 리액트 애플리케이션의 상태를 효율적으로 관리하기 위한 라이브러리로, 예측 가능하고 유지보수하기 쉬운 애플리케이션을 만드는 데 도움을 줍니다. 이 포스팅에서는 리덕스를 이용한 리액트 상태 관리 방법을 자세히 설명하겠습니다.


리덕스의 중요성


리덕스는 애플리케이션의 상태를 중앙에서 관리하여 상태의 일관성을 유지하고, 디버깅을 용이하게 합니다. 이를 통해 복잡한 애플리케이션에서도 상태 관리가 쉬워지고, 코드의 유지보수성이 크게 향상됩니다.


리덕스 설치 및 기본 설정


리덕스를 사용하기 위해서는 redux와 react-redux 패키지를 설치해야 합니다.


npm install redux react-redux

설치가 완료되면, 리덕스의 주요 개념인 스토어(Store), 액션(Action), 리듀서(Reducer)를 설정해야 합니다.


스토어 설정


스토어는 애플리케이션의 상태를 보관하는 객체입니다. createStore 함수를 사용하여 스토어를 생성할 수 있습니다.


import { createStore } from 'redux';
import rootReducer from './reducers';

const store = createStore(rootReducer);

export default store;

리듀서 작성


리듀서는 액션을 처리하여 새로운 상태를 반환하는 함수입니다. 다음은 간단한 카운터 리듀서 예제입니다.


const initialState = {
  count: 0
};

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

export default counterReducer;

액션 작성


액션은 상태 변화를 일으키는 지시사항을 담은 객체입니다. 액션은 타입과 페이로드를 포함할 수 있습니다.


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

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

리덕스와 리액트 연결


리덕스와 리액트를 연결하기 위해서는 Provider 컴포넌트를 사용하여 애플리케이션의 최상위 컴포넌트를 감싸야 합니다.


import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import App from './App';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

리액트 컴포넌트에서 리덕스 사용하기


리액트 컴포넌트에서 리덕스 상태를 사용하려면 useSelector와 useDispatch 훅을 사용해야 합니다.


상태 조회


useSelector 훅을 사용하여 리덕스 스토어의 상태를 조회할 수 있습니다.


import React from 'react';
import { useSelector } from 'react-redux';

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

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

export default Counter;

액션 디스패치


useDispatch 훅을 사용하여 액션을 디스패치할 수 있습니다.


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

function Counter() {
  const dispatch = useDispatch();

  return (
    <div>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
    </div>
  );
}

export default Counter;

전체 예제


리덕스를 사용하여 카운터 애플리케이션을 구현하는 전체 예제입니다.


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

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

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

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

export default counterReducer;

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

const store = createStore(counterReducer);

export default store;

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

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
    </div>
  );
}

export default App;

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

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

리덕스의 주요 개념


리덕스의 주요 개념은 스토어, 액션, 리듀서입니다. 이를 통해 애플리케이션의 상태를 일관성 있게 관리할 수 있습니다.


스토어


스토어는 애플리케이션의 상태를 보관하는 객체로, createStore 함수를 사용하여 생성합니다. 스토어는 상태를 조회하고, 액션을 디스패치하며, 상태 변화를 구독할 수 있습니다.


액션


액션은 상태 변화를 일으키는 지시사항을 담은 객체로, 타입과 페이로드를 포함할 수 있습니다. 액션은 액션 생성자 함수를 통해 생성됩니다.


리듀서


리듀서는 액션을 처리하여 새로운 상태를 반환하는 함수입니다. 리듀서는 순수 함수로 작성되어야 하며, 동일한 인풋에 대해 항상 동일한 아웃풋을 반환해야 합니다.


주요 포인트 요약 및 추가 학습 자료


이 포스팅에서는 리덕스를 이용한 리액트 상태 관리 방법에 대해 살펴보았습니다. 리덕스를 사용하면 애플리케이션의 상태를 일관성 있게 관리할 수 있으며, 코드의 유지보수성이 크게 향상됩니다. 추가로 학습할 자료는 다음 링크를 참고하시기 바랍니다:


Tags:
다음 이전