리덕스(Redux) 1.0

1. 리덕스란?

리덕스(Redux)는 리액트에서 상태(state) 관리를 효율적으로 하기 위한 라이브러리이다. 애플리케이션이 커질수록 상태 관리가 복잡해지는데, 리덕스를 사용하면 전역 상태를 체계적으로 관리할 수 있다.

1.1 리덕스를 사용하는 이유

• 전역 상태 관리: props 전달 없이 상태를 공유할 수 있다.
• 예측 가능성: 상태 변경이 한 곳에서 이루어져 디버깅이 용이하다.
• 유지보수 용이: 코드의 일관성이 높아 관리가 쉽다.
• prop drilling 방지: 중간 컴포넌트가 불필요하게 상태를 전달할 필요가 없다.

2. 리덕스의 핵심 개념

리덕스는 단방향 데이터 흐름을 따른다. 즉, 데이터의 변경이 한 방향으로만 이루어지므로 예측 가능하고 디버깅이 쉬워진다.

개념설명

스토어(Store)	애플리케이션의 전역 상태를 저장하는 공간. 반드시 하나만 존재해야 한다.
액션(Action)	상태를 변경하기 위한 객체로, type 속성을 필수로 포함해야 한다.
리듀서(Reducer)	현재 상태와 액션을 받아 새로운 상태를 반환하는 순수 함수이다.
디스패치(Dispatch)	액션을 스토어에 전달하는 함수로, 상태 변경을 요청하는 역할을 한다.
구독(Subscribe)	상태 변경이 일어났을 때, 특정 로직을 실행할 수 있도록 한다.

2.1 리덕스의 상태 변경 흐름

1. 액션(Action) 생성 및 디스패치
   • 사용자의 이벤트나 애플리케이션 로직에 따라 액션이 생성된다.
   • 생성된 액션은 dispatch를 통해 스토어에 전달된다.
2. 리듀서(Reducer) 처리
   • 스토어는 디스패치된 액션과 현재 상태를 리듀서에 전달한다.
   • 리듀서는 상태를 변경한 후 새로운 상태를 반환한다.
3. 상태 업데이트 및 구독자 통지
   • 새로운 상태가 스토어에 업데이트된다.
   • 스토어를 구독하고 있는 컴포넌트가 변경된 상태를 받아 UI를 업데이트한다.

3. 리덕스를 리액트에 연결하기

3.1 패키지 설치

npm install redux react-redux

3.2 스토어 설정 및 Provider 적용

import { createStore } from 'redux';
import { Provider } from 'react-redux';
import counterReducer from './reducers';

const store = createStore(counterReducer);

const App = () => (
  <Provider store={store}>
    <Counter />
  </Provider>
);

Provider를 사용하면 애플리케이션의 모든 컴포넌트가 store에 접근할 수 있다.

3.3 액션과 리듀서 구현

액션 생성

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

리듀서 구현

// reducers.js
const counterReducer = (state = 0, action) => {
  switch (action.type) {
    case 'INCREMENT': return state + 1;
    case 'DECREMENT': return state - 1;
    default: return state;
  }
};
export default counterReducer;

3.4 컴포넌트에서 상태 활용하기

리덕스를 사용하기 위해 useSelector와 useDispatch 훅을 활용한다.

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

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

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

4. Flux 아키텍처와 Redux

리덕스는 Flux 아키텍처에서 영향을 받아 만들어진 라이브러리이다. Flux는 UI 요소가 직접 데이터를 변경하지 못하도록 구조화된 패턴을 제공한다.

Flux 개념	Redux 대응
Store	스토어(Store)
Dispatcher	디스패치(Dispatch)
Action	액션(Action)
View	React 컴포넌트
Reducer	리듀서(Reducer)

이러한 구조를 통해 prop drilling 문제를 해결하고, 컴포넌트 간의 종속성을 줄일 수 있다.

5. 마무리

리덕스를 사용하면 상태 관리를 효율적으로 할 수 있으며, 유지보수가 쉬워진다. 주요 개념인 스토어, 액션, 리듀서를 이해하고, 리액트에서 useSelector와 useDispatch를 활용하여 상태를 읽고 변경할 수 있다.