Redux 로 상태관리 하기 - 기본 개념 및 사용방법

이번 포스팅에서는 Redux란 무엇이고 코드 예시를 통해 사용방법에 대해 포스팅해보려한다.

목차

• Redux 란?
• Context와 차이점
• Redux 설치 및 사용 방법

 

1. Redux 란 ?

리덕스는 상태 관리 라이브러리로서 자바스크립트 기반의 웹 어플리케이션에서 데이터의 상태를 효율적으로 관리하기 위해 사용한다. 보통 React와 함께 사용되는 것이 일반적이지만 Angular, Vue.js 등 다른 자바스크립트 프레임워크와도 함께 사용이 가능하다. 

[Redux Data Flow]

간단하게 요약해서 app 내에서 사용되는 데이터의 상태(State)를 Store라는 하나의 저장소에서 관리하고 필요에 따라 Dipatch로 Action을 Reducer에게 전달하여 상태의 값을 변경하고 변경된 상태의 값을 컴포넌트로 전달해주는 역할을 한다. 즉, 리덕스의 Store를 통해 app 내의 모든 컴포넌트가 전역적으로 데이터의 상태 값을 가져오고 업데이트 할 수 있는 것이다. 

 

2. Context 와 차이점

이렇게 보면 상태 관리를 하는 기능 면에서 Context와 얼핏 비슷해보이지만 Redux와의 가장 큰 차이점은 Context는 상태 값을 직접 변경할 수 없다는 것이다. Context는 상위 컴포넌트에서 하위 컴포넌트로 Props 를 내려줄때 단방향 하향식 tree 구조로 인해 Props의 전달만을 위한 컴포넌트의 문제점이 야기하는 Props Drilling을 개선하는 역할을 할 뿐이지 Context 자체에서 상태 값을 직접 변경할 수는 없다. 

하지만 리덕스는 Action을 전달하여 Reducer를 통해 상태 값 업데이트하고 변경된 상태값을 컴포넌트에게 전달한다.

 

리덕스는 Action과 Reducer를 사용에 따라 추가적인 로직설계가 필요해서 Context에 비해 조금 더 복잡성은 올라갈 수 있기에 관리해야할 상태 값이 많고 규모가 큰 프로젝트에서 사용이 적합하다.

 

3. Redux 설치 및 사용 방법

 1) Redux 설치

npm install redux --save

우선 프로젝트 경로에서 npm 으로 위 명령어를 실행하여 redux를 설치한다.

 

2) index.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { createStore } from 'redux';
import conuterReducer from './reducers';

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);

//store 생성
const store = createStore(conuterReducer);

const render = () =>
  root.render(
    <React.StrictMode>
      <App store={store} />
    </React.StrictMode>
  );

render();
// 상태값이 바뀔때마다 ui 업데이트
store.subscribe(render);

위와 같이 index 에서 store 생성을 해주고 App 컴포넌트에 store를  props로 넣어준다. store.subscribe로 구독을 해줘야 리덕스 스토어에서 관리되는 상태 값들이 바뀔때마다 ui 에서도 업데이트 된다.

 

3) App.tsx

import React from 'react';

import './App.css';
import { Store } from 'redux';

type Props = {
  store: Store;
};

function App({ store }: Props) {
  return (
    <div className='App'>
      <div className='counterApp'>
        <button onClick={() => store.dispatch({ type: 'INCREMENT' })}>+</button>
        <span> {store.getState()} </span>
        <button onClick={() => store.dispatch({ type: 'DECREMENT' })}>-</button>
      </div>
    </div>
  );
}

export default App;

+버튼과 -버튼으로 숫자를 증감하는 간단한 counter app이다. 

App 컴포넌트에서 store를 props로 받고 + 버튼과 -버튼으로 dispatch를 통한 Action을 보내서 reducer 에게 전달해준다. 

상태 값은 getState 함수를 이용하여 store에 저장된 상태 값을 가져올 수 있다.

 

4) counterReducer.tsx

interface Action {
  type: string;
}

const counter = (state: number = 0, action: Action) => {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      return state;
  }
};

export default counter;

상태 값을 업데이트 해주는 reducer 이다. action 의 타입에 따라 상태 값을 업데이트하고 변경된 상태값을 컴포넌트에게 돌려준다.