Redux

•

Redux 란?

◦

Reduce

◦

Flux

•

Redux 이해하기

•

Redux 기본 원리

•

Redux 구성 요소

◦

스토어

◦

액션

◦

리듀서

◦

디스패치

•

Redux 동작 과정

◦

이벤트 발생

◦

액션 발생

◦

디스패치

◦

리듀서 실행

◦

상태 업데이트

◦

구독자 알림

•

Redux 관련 라이브러리

•

예시 코드

Redux 란?

Reduce + Flux : 단방향 데이터 흐름 기반 상태 관리 라이브러리

Reduce

자바스크립트의 reduce 함수는 배열을 순회하면서 누적 값을 계산하는 함수

Flux

상태 관리를 단순화하고 예측 가능하게 하는 단방향 데이터 흐름 아키텍처 (FaceBook 이 만든 애플리케이션 아키텍처)

Redux 시작하기 | Redux

소개 > 시작하기: Redux를 배우고 사용하기 위한 자료

https://ko.redux.js.org/introduction/getting-started/

Redux 이해하기

기상청 & 시청자가 방송국으로 현장의 기상 상황을 제보합니다.

방송국 스튜디오에서는 박대기 기자를 현장으로 파견합니다.

박대기 기자는 현장에서 대기하며 현재 날씨와 날씨 변화와 강도를 취재하고, 현장의 컨트롤 타워인 PD는 새로운 날씨 상황을 라이브로 방송합니다.

이 현장 기상 상황 뉴스를 시청자들이 시청합니다.

시청자가 제보를 하는 모습은 마치, Redux 동작 과정의 이벤트 발생과 유사합니다. 이 제보를 받은 방송국 스튜디오는 현장에 가서 어떤 액션을 취해야할지 정하고 박대기 기자를 파견하는데, 박대기 기자를 파견하는 과정은 Redux 동작 과정의 Dispatch 와 유사합니다.

액션을 가지고 파견된 박대기 기자와 현장에 있는 PD는 현재 상황과 액션을 파악하고, 새로운 날씨 상황을 취재하여 방송합니다. 이 과정은 마치 State 와 Action 을 전달 받아 새로운 State 를 반환하는 리듀서의 동작 과정과 유사합니다.

이어서 이 방송 뉴스를 통해 새로운 날씨 상황이 시청자들에게 전달되고 날씨에 영향을 받는 지역에 전달되는 과정은 Redux 동작 과정에서 Store 를 구독한 컴포넌트들이 상태 변화를 전달 받는 과정과 유사합니다.

화재 현장에서 119 에 전화하여 제보합니다.

119 상황실에서 소방 당국에 화재 현장 제보에 대하여 보고합니다.

소방 당국은 119 상황실로 전달 받은, 책임자의 현재 단계와 대응 방향을 전달 받아 새로운 대응 단계를 발표합니다.

이에 따라, 대응 단계에 맞는 화재 현장에 대응이 이루어집니다.

이렇게 화재 현장의 제보가 119 상황실에 전달되고, 이에 대한 소방 비상 대응 단계를 소방 당국 컨트롤 타워에서 처리하여 새로운 대응 단계를 발표하고 화재 현장에 대응하는 과정은 마치 Redux 의 동작 과정과 유사합니다.

리덕스 애플리케이션에서 상태 관리가 이루어지는 과정을 단계별로 살펴보겠습니다. 먼저, 액션 발생 단계에서는 사용자가 UI와 상호작용하거나 다른 이벤트가 발생할 때 액션이 생성됩니다. 예를 들어, 사용자가 버튼을 클릭하면 액션이 발생합니다. 이 액션은 상태 변경을 지시하는 정보를 담고 있습니다.

다음으로, 디스패치 단계가 있습니다. 생성된 액션은 dispatch 메서드를 통해 스토어에 전달됩니다. 이 과정은 액션을 스토어에 보내는 역할을 하며, 이를 통해 상태 변경을 요청합니다.

이후 리듀서 실행 단계에서 스토어는 해당 액션을 리듀서로 전달합니다. 리듀서는 현재 상태와 전달된 액션을 기반으로 새로운 상태를 계산합니다. 리듀서는 순수 함수로, 주어진 입력(현재 상태와 액션)에 따라 동일한 출력(새로운 상태)을 반환합니다.

상태 업데이트 단계에서는 리듀서가 반환한 새로운 상태가 스토어에 저장됩니다. 스토어는 항상 현재 애플리케이션의 상태를 보유하고 있으며, 리듀서를 통해 계산된 상태를 최신 상태로 유지합니다.

마지막으로, 구독자 알림 단계가 진행됩니다. 스토어는 상태가 변경될 때마다 구독된 모든 리스너에게 상태 변화 사실을 통지합니다. 리스너는 일반적으로 리액트 컴포넌트로, 상태 변화가 발생하면 컴포넌트는 새로운 상태를 반영하여 자동으로 리렌더링됩니다. 이를 통해 애플리케이션의 UI는 항상 최신 상태를 반영하게 됩니다.

이러한 단계들이 모여 리덕스 애플리케이션의 상태 관리 흐름을 구성합니다. 이 과정은 상태 변경을 예측 가능하고 일관성 있게 유지하도록 돕습니다.

Redux 기본 원칙

•

단일 진실의 근원: 애플리케이션의 모든 상태는 하나의 스토어(store)에 저장됩니다. 이는 상태를 쉽게 추적하고 디버깅하는 데 도움을 줍니다.

•

상태는 읽기 전용: 상태를 직접 수정하지 않고, 액션(action)을 통해서만 상태를 변경할 수 있습니다.

•

변경은 순수 함수(reducer)로: 상태와 액션을 입력받아 새로운 상태를 반환하는 순수 함수인 리듀서(reducer)를 통해 상태가 변경됩니다.

Redux 구성 요소

•

액션

•

디스패치

•

스토어

•

리듀서

액션 (Action)

type + payload : 어떤 이벤트가 일어나서 어떤 상태가 변경되야하는지 나타내는 객체

•

type : 액션의 종류

•

payload : 데이터

디스패치 (Dispatch)

액션을 스토어에 보내는 함수

스토어 (Store)

애플리케이션 상태 저장소

리듀서 (Reducer)

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

Redux 동작 과정

액션 발생
: UI나 다른 이벤트에 의해 액션이 발생합니다.

디스패치
: 액션을 스토어에 디스패치합니다.

리듀서 실행
: 스토어는 리듀서를 호출하여 새로운 상태를 계산합니다.

상태 업데이트
: 새로운 상태가 스토어에 저장됩니다.

구독자 알림
: 스토어에 구독된 모든 리스너(컴포넌트 등)에게 상태 변화가 통지됩니다.

Redux 관련 라이브러리

•

redux

•

react-redux

•

redux-devtools-extension

•

redux-actions

Redux 라이브러리 설치

npm install redux react-redux redux-devtools-extension redux-actions
Bash
복사

npm install redux
npm install react-redux
npm install redux-devtools-extension
npm install redux-actions
Bash
복사

redux

Redux는 자바스크립트 애플리케이션을 위한 상태 관리 라이브러리입니다. 애플리케이션의 상태를 예측 가능한 방식으로 관리할 수 있게 해주며, 주로 React와 함께 사용됩니다. Redux는 단일 스토어, 액션, 리듀서, 미들웨어 등을 통해 상태를 관리합니다.

npm install redux
Bash
복사

react-redux

React-Redux는 Redux와 React를 연결해주는 공식 바인딩 라이브러리입니다. React 컴포넌트가 Redux 스토어와 상호작용할 수 있도록 도와줍니다. Provider 컴포넌트를 사용하여 Redux 스토어를 React 컴포넌트 트리에 주입하고, connect 함수나 useSelector 및 useDispatch 훅을 사용하여 컴포넌트가 상태를 읽고 액션을 디스패치할 수 있게 합니다.

npm install react-redux
Bash
복사

redux-devtools-extension

Redux DevTools Extension은 Redux 상태와 액션을 디버그하는 데 도움을 주는 브라우저 확장 프로그램입니다. 이 확장을 사용하면 애플리케이션의 상태 변화를 시각적으로 추적하고, 타임 트래블 디버깅을 통해 상태를 이전 단계로 되돌릴 수 있습니다.

npm install redux-devtools-extension
Bash
복사

redux-actions

Redux-Actions는 Redux에서 액션 생성자와 리듀서를 간결하게 정의할 수 있게 해주는 유틸리티 라이브러리입니다. createAction과 handleActions 같은 함수들을 제공하여 액션 생성과 리듀서 정의를 단순화합니다.

npm install redux-actions
Bash
복사

예시코드

•

카운터 앱 프로젝트

•

프로젝트 생성

•

라이브러리 설치

•

코드 작업

◦

액션 타입 선언

◦

액션 생성 함수 정의

◦

리듀서 함수 정의

◦

스토어 정의

◦

UI 화면

◦

Store Provider 

카운터 앱 프로젝트

프로젝트 생성

npx create-react-app redux-app
Bash
복사

라이브러리 설치

•

Redux

npm install redux @reduxjs/toolkit react-redux redux-actions
Bash
복사

•

bootstrap

npm install bootstrap
Bash
복사

•

sweetalert2

npm install sweetalert2 sweetalert2-react-content
Bash
복사

코드 작업

•

액션 타입 선언

•

액션 생성 함수 정의

•

리듀서 함수 정의

•

스토어 정의

•

UI 화면 

액션 타입 선언

•

actionTypes.js

// 액션 타입 정의
export const INCREMENT = 'INCREMENT'
export const DECREMENT = 'DECREMENT'
JavaScript
복사

Redux에서 상태를 변경하는 동작(액션)을 문자열 상수로 선언하는 코드입니다.

그 때 그 때 필요한 곳에서 문자열로 액션을 나타내도 되지만, 문자열 상수로 선언하면 오타로 인한 버그를 방지할 수 있는 이점이 있습니다.

액션 생성 함수 정의

// 액션 생성 함수 정의
import { createAction } from 'redux-actions';
import { DECREMENT, INCREMENT } from './actionTypes';

export const increment = createAction(INCREMENT)
export const decrement = createAction(DECREMENT)
JavaScript
복사

Redux 액션 생성 함수를 정의한 코드입니다.

createAction 함수

액션 타입을 인자로 지정하여, 해당 타입을 가진 액션 생성 함수를 반환하는 함수

createAction 함수로 액션을 생성하는 함수를 만듭니다. 위의 코드에서는 카운트를 증가시키는 의미의 ‘INCREMENT’ 액션 타입과 카운트를 감소시키는 의미로 ‘DECREMENT’ 액션 타입을 가진 increment(), decrement() 액션 생성함수를 정의합니다.

이렇게 액션 생성 함수를 정의하면, 이벤트 핸들러에서 dispatch() 함수를 호출하면서 해당 이벤트에 연결될 액션 생성 함수를 전달하면 스토어에 미리 정의된 액션을 전달할 수 있습니다.

리듀서 함수 정의

// 리듀서 정의
import { handleActions } from 'redux-actions';
import { DECREMENT, INCREMENT } from './actionTypes';

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

// 리듀서
const counterReducer = handleActions(
  {
    [INCREMENT] : (state) => ( {count: state.count + 1} ),
    [DECREMENT] : (state) => ( {count: state.count - 1} ),
  },
  initialState
)

export default counterReducer;
JavaScript
복사

redux-actions 라이브러리를 사용하여 리듀서를 정의하는 코드입니다.

스토어 정의

// 스토어 정의
import { configureStore } from '@reduxjs/toolkit'
import rootReducer from './reducers';

const store = configureStore({
  reducer: rootReducer
});

export default store;
JavaScript
복사

UI 화면

•

App.js

import { useDispatch, useSelector } from 'react-redux';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css'
import { decrement, increment } from './redux/actions';

function App() {
  // 스토어의 상태 선택 : count
  const count = useSelector( (state) => state.count )
  // 디스패치
  const dispatch = useDispatch()

  return (
    <div className="container d-flex flex-column justify-content-center align-items-center" style={{ minHeight: '100vh' }}>
      <div className="card text-center p-4 shadow">
        <h1 className="card-title">Counter</h1>
        <h3>{count}</h3>
        <div className="card-body">
          <button className='btn btn-primary me-2'
                  onClick={() => dispatch(increment())}
            >+</button>
          <button className='btn btn-danger'
                  onClick={() => dispatch(decrement())}
            >-</button>
        </div>
      </div>
    </div>
  );
}

export default App;
JavaScript
복사

Store Provider

•

index.js

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
	  {/* ⭐ Provider를 사용하여 Redux 스토어를 React 애플리케이션에 제공 */}
    <Provider store={ store }>
      <App />   {/* ⭐ App 및 하위 컴포넌트에서 Redux 스토어에 접근 가능 */}
    </Provider>
  </React.StrictMode>
);

reportWebVitals();
JavaScript
복사