[Redux] Redux란? 내용 총 정리!

✋ 잠깐! Flux 패턴이란?

사용자 입력을 기반으로 Action을 생성하고 이를 Dispatcher에 전달하여 Store의 데이터를 변경한 뒤 View에 반영하는 단방향의 데이터 흐름을 가지는 소프트웨어 아키텍처이다.

 

Flux 패턴으로 구현된 프로젝트는 데이터가 단방향으로만 전달되기 때문에 데이터의 흐름을 파악하기가 용이하고, 그 결과를 쉽게 예측할 수 있다는 장점이 있다.

 

이러한 Flux 패턴에 Reducer를 결합하여 만든 것이 바로 Redux이다!

* Reducer는 이전 상태와 동작을 받아 새 상태를 리턴하는 순수 함수를 말한다.

 

 

---

 

🔎 Redux란?

여러 컴포넌트가 공유하는 상태를 관리하기 위한 라이브러리이다.

 

상태?
React에서 State(상태)는 component 안에서 관리되는 것이다.
자식 컴포넌트들 간의 다이렉트로 데이터 전달이 불가능하다. 
따라서 자식 컴포넌트들 간의 데이터를 주고 받을 때는 상태를 관리하는 부모 컴포넌트를 통해서 주고 받는데
자식이 많아진다면 상태 관리가 매우 복잡해진다!

 

출처 : TCPSCHOOL.com

 

→ Redux를 사용하면 상태 관리를 컴포넌트 밖에서 할 수 있다

: 상태 관리 로직을 컴포넌트와 분리시킴으로써 효율적으로 관리할 수 있게 되며, 컴포넌트끼리 state를 공유할 때 여러 컴포넌트를 거쳐 prop를 복잡하게 전달하지 않아도 손쉽게 값을 전달할 수 있게 된다

 

---

 

🔎 Redux의 동작 원리

 

- Store

스토어는 상태가 관리되는 오직 하나의 공간으로, 스토어를 통해 state와 Reducer를 저장한다.

 

- Action

액션은 앱에서 스토어에 운반할 데이터를 말한다. 

 

- Reducer

액션을 스토어에 바로 전달하는 것이 아니라 먼저 액션을 리듀서에 전달한다. 리듀서는 현재 상태와 액션을 인수로 전달 받아 스토어에 접근하고 전달 받은 액션을 참고하여 새로운 상태를 만들어 반환한다.

* 액션을 리듀서에 전달하기 위해 dispatch() 메소드를 사용한다.

 

💡 전체 흐름 정리

1. 사용자가 UI를 통해 컴포넌트 내에 존재하는 이벤트를 호출한다.
2. 이벤트와 연결된 액션 생성 함수가 호출된다.
3. 액션 생성 함수에서 생성된 Action이 호출된다.
4. 호출된 Action이 Reducer로 전달(Dispatch)된다.
5. Reducer에서 Dispatch된 Action에 따라 state 값을 변경한다.
6. 변경된 state가 렌더링되어 UI에 표시된다.

 

 

---

 

🔎 Redux 실습

* 저는 프로젝트를 진행하며 회원 정보와 access token 저장할 때 redux를 사용했습니다. 프로젝트 진행 당시 코드를 참고하여 실습 내을 정리하였습니다.

 

0. 리덕스 설치

npm install redux
npm install react-redux

 

1. reducer 정의

const initailState = {
    token: null,
    member: {},
}

const SET_TOKEN = 'SET_TOKEN';
const SET_MEMBER = 'SET_MEMBER';

export const setToken = data => ({type: SET_TOKEN, data});
export const setMember = data => ({type: SET_MEMBER, data});

export default function member(state = initailState, action) { // reducer
    switch(action.type) {
        case SET_TOKEN:
            return {
                ...state,
                token: action.data
            }
        case SET_MEMBER:
            return {
                ...state,
                member: action.data
            }
        default:
            return state;
    }
}

 

2. store 생성

import { combineReducers } from "redux";
import { persistReducer } from "redux-persist";
import member from "./member";
import storage from "redux-persist/lib/storage";

const persistConfig = {
    key: "root",
    storage,
    whitelist: ["member"],
}

const rootReducer = combineReducers({member});

export default persistReducer(persistConfig, rootReducer);

 

* persistReducer : redux-persist와 리덕스 모듈 정보를 종합하여 persist 정보를 반환

 

리덕스를 사용하면 새로고침 버튼을 누르게 됐을 때 저장되어있던 상태가 모두 초기화 되는 것을 확인할 수 있다. 이를 미연에 방지하고자 Redux persist를 활용하여 에러를 방지할 수 있다. 

즉, Redux persist는 리덕스에 저장된 데이터를 로컬 스토리지 또는 세션 스토리지에 저장하여 데이터를 유지시켜주는 패키지이다.

 

3. index.js (reducer 반영)

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 rootReducer from './redux/modules/store';
import { configureStore } from '@reduxjs/toolkit';
import { persistStore } from 'redux-persist';
import { PersistGate } from 'redux-persist/integration/react';

const root = ReactDOM.createRoot(document.getElementById('root'));
const store = configureStore({ reducer: rootReducer });
const persistor = persistStore(store); // redux store 생성

root.render(
    <Provider store={store}>
        <PersistGate persistor={persistor}> <!-- 스토어 내용이 정의된 변수를 대입 -->
            <App />
        </PersistGate>
    </Provider>,
);

export default store;

reportWebVitals();

 

* persistStore : 정의된 store 내용에 따라 리덕스 데이터를 유지시킬 수 있는 리덕스 스토어를 생성

 

4. 리액트 프로젝트에 적용

- 데이터 저장

import { setToken, setMember } from "../../redux/modules/member";
import { useDispatch } from "react-redux";

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

    const handleLogin = () => {
        dispatch(setToken("서버에서 받아온 토큰 값 저장")); // 토큰 값 바꾸면서 reducer 호출
    }
  
    const LoginView = (
        <S.Container>
        </S.Container>
    );

    return LoginView;
}

export default Login;

 

- 데이터 조회

import { useSelector } from 'react-redux';
const { token } = useSelector(state => state.member); // 리덕스 리듀서의 이름

 

* useSelector : redux를 통해 관리되는 상태 값을 조회할 수 있는 함수

 

---

 

📜 참고

https://medium.com/@heoh06/%EB%A6%AC%EC%95%A1%ED%8A%B8-redux%EC%99%80-%EC%82%AC%EC%9A%A9%EB%B2%95-731853fc3cd4

[리액트] Redux와 사용법

https://phsun102.tistory.com/105

React - Redux persist를 활용한 리덕스 상태값 유지

https://duckgugong.tistory.com/239

로그인 구현 (redux-persist)

https://www.tcpschool.com/react/react_redux_intro

코딩교육 티씨피스쿨