Redux 완벽 가이드 : 개념, 사용법, 예제코드

Redux의 개념

Redux는 React애플리케이션에서 상태(state)를 중앙에서 관리하는 전역 상태 관리를 위한 JavaScript 라이브러리이다.

상태를 한 곳에서 관리하면 여러 컴포넌트가 같은 데이터를 쉽게 공유할 수 있다.

---

 

기본 개념

• Store : 상태가 저장되는 곳이다. 하나의 애플리케이션에 하나의 Store가 존재 한다.
• Action : 상태에 변화를 일으키는 '이벤트'를 위미한다. 예: 버튼 클릭, 데이터 요청 등
• Reducer: 상태를 업데이트 하는 함수이다. Action을 받아서 새로운 상태를 반환한다.
• Dispatch: Action을 Store에 전달하는 방법이다

---

Redux의 기본 흐름(두 가지 방식)

Redux에서 액션을 사용하여 상태를 업데이트하는 방법에는 두 가지 방식이 있다.

1. 직접 객체로 dispatch()하는 방식
2. 액션을 따로 함수로 정의해서 사용하는 방식

두 방식 모두 같은 결과를 내지만, 코드의 유지보수성과 확장성 측면에서 차이가 있다.

 

---

 

직접 dispatch()에 액션 객체 넣기

 

1. Action (액션)

• 상태를 어떻게 변경할지 설명하는 객체

const increment = () => ({ type: "INCREMENT" });
const decrement = () => ({ type: "DECREMENT" });

 

• increment()와 decrement()는 액션 생성자 함수 이다.
• 실행하면 각각{type:"INCREMENT"} 또는 {type:"DECREMENT"} 객체를 반환한다.
• 액션(action)은 type속성을 필수로 가져야 하며, 이 값이 리듀서에서 상태를 변경하는 기준이 된다.

 

2. Reducer(리듀서)

• 현재 상태와 액션을 받아 새로운 상태를 반환하는 함수

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

 

 

3. Store(스토어)

• 애플리케이션의 모든 상태를 저장하는 객체

import { createStore } from "redux";
const store = createStore(counterReducer);

• createStore(counterReducer)로 스토어(store)를 생성한다.
• 스토어는 상태(state)를 관리하고, 액션(action)을 받아 리듀서(reducer)를 실행하는 역할을 한다.

 

4. 상태 변화 감지

store.subscribe(() => console.log("현재 상태:", store.getState()));

• store.subscribe(callback) → 상태가 바뀔 때마다 callback 실행
• store.getState() → 현재 상태 반환

 

5. Dispatch(디스패치)

• 스토어에 액션을 보내는 방법

store.dispatch(increment()); // 현재 상태: 1
store.dispatch(increment()); // 현재 상태: 2
store.dispatch(decrement()); // 현재 상태: 1

 

• dispatch(increment()) → increment()가 실행되면서 {type:"INCREMENT"}가 전달됨
• 스토어는 이 액션을 리듀서에 전달하여 상태를 업데이트
• 상태 변경 후 subscribe()가 실행되어 콘솔에 현재 상태 출력

 

 

예제 코드

import { createStore } from "redux";

// 1. 액션 생성자 함수
const increment = () => ({ type: "INCREMENT" });
const decrement = () => ({ type: "DECREMENT" });

// 2. 리듀서 함수
const counterReducer = (state = 0, action) => {
  switch (action.type) {
    case "INCREMENT":
      return state + 1;
    case "DECREMENT":
      return state - 1;
    default:
      return state;
  }
};

// 3. 스토어 생성
const store = createStore(counterReducer);

// 4. 상태 변화 확인
store.subscribe(() => console.log("현재 상태:", store.getState()));

// 5. 액션 디스패치
store.dispatch(increment()); // 현재 상태: 1
store.dispatch(increment()); // 현재 상태: 2
store.dispatch(decrement()); // 현재 상태: 1

 

---

액션을 따로 함수로 정의해서 사용하는 방식

 

 

1. Redux 설치

npm install redux react-redux

 

2. Redux 설정(Counter 예제)

 

store.js

import { createStore } from 'redux';

// 초기 상태
const initialState = { count: 0 };

// Reducer 함수
const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT': // 증가 액션 발생하면 count +1
      return { count: state.count + 1 };
    case 'DECREMENT': //감소 액션이 발생하면 count -1
      return { count: state.count - 1 };
    default:
      return state; // 기본적으로 현재 상태 유지
  }
};

// Store 생성
const store = createStore(counterReducer);

export default store;

 

 

1. 초기 상태 정의

const initialState = { count: 0 };

 

• Redux의 초기 상태는 {count:0} 객체로 설정됨

2. 리듀서 함수

const counterReducer = (state = initialState, action) => { ... }

 

• 위에서 봤던 리듀서와 같지만, 상태가 객체 형태({count:값})로 변경됨
• 새로운 상태를 반환할 때 return {count: state.count + 1}; 처럼 객체를 유지해야 함

3. 스토어 생성

const store = createStore(counterReducer);

 

이 스토어는 React애플리케이션에서 사용할 중앙 상태 관리소

 

 

---

 

 

App.js

import React from 'react';
import { Provider, useDispatch, useSelector } from 'react-redux';
import store from './store';

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

  return (
    <div>
      <h1>카운트: {count}</h1>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>증가</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>감소</button>
    </div>
  );
}

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

export default App;

 

1. 상태 가져오기

const count = useSelector((state) => state.count);

 

userSelector 훅을 사용하여 Redux 상태에서 count 값을 가져온다.

 

2. 액션 디스패치

const dispatch = useDispatch();

 

useDispatch() 훅을 사용하여 액션을 보낼 dispatch 함수를 얻는다.

 

3. 버튼 클릭 시 액션 대스패치

<button onClick={() => dispatch({ type: 'INCREMENT' })}>증가</button>
<button onClick={() => dispatch({ type: 'DECREMENT' })}>감소</button>

 

• dispatch({type: 'INCREMENT'}) → Redux 스토어에 INCREMENT 액션 전달
• 리듀서가 상태를 변경하고, useSelector를 통해 상태가 자동으로 업데이트 되어 UI에 반영됨

App 컴포넌트(Redux Provider 적용)

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

 

Provider 컴포넌트가 store를 감싸서 모든 하위 컴포넌트가 Redux상태를 사용할 수 있도록 한다.

 

• createStore : store를 만들어서 전역 상태를 관리
• Provider : store를전체 애플리케이션에 제공
• useSelector : store에서 필요한 상태를 가져온다.
• useDispatch : 상태를 변경할 수 있는 액션을 보낸다.