[React] Redux

Kim Yuhyeon·2024년 3월 5일

React

목록 보기

9/10

Redux

https://ko.redux.js.org/

전역 상태관리 라이브러리가 필요한 이유

자바 스크립트 SPA(Single Page Application)이 복잡해짐.

서버 응답
캐시 데이터
local state
Active Router
Selected Tab
Loading Visible or NonVisible
Paginantion Control

-> 위와 같은 다양한 UI 상태를 포함하여 많은 상태를 자바스크립트 코드로 관리할 필요가 생김.

React에서의 상태 관리

어떻게 상태를 전달하는가?

Props 전달
상위 컴포넌트에서 하위 컴포넌트로 props를 통해 상태를 내려보낸다.
Callback 함수
하위 컴포넌트에서 상태를 변경할 필요가 있을 경우, 상위 컴포넌트에서 변경을 위한 함수를 props로 전달한다.

불편한 점

Props 드릴링
상태를 가장 하위 컴포넌트까지 전달해야 하는 경우, 중간에 있는 모든 컴포넌트들을 거쳐야 한다.
데이터 일관성
여러 컴포넌트에서 같은 상태를 관리할 경우, 일관성을 유지하기 어렵다.
재사용성
같은 상태 로직을 여러 곳에서 사용할 경우, 코드를 중복으로 작성해야 할 수 있다.

일반적으로 전역 상태 관리로 관리되는 상태들

사용자 인증 정보
로그인한 사용자의 정보나 토큰 등
전역 설정 정보
테마, 레이아웃, 언어 등
Caching 된 데이터
서버에서 가져온 데이터를 재사용할 경우
알림 및 메시지
알림이나 오류 메시지 등 전역적인 UI 상태
쇼핑 카트
온라인 쇼핑 사이트에서 사용자가 담은 상품 목록 등

** 전역상태 관리가 필요한 상황과 그렇지 않은 상황을 명확히 구분하여 상황에 따라 적절한 상태 관리하기

오른쪽과 같이 State 관리를 중앙화 하기

React에서 전역 상태 관리 도구

React 내부 관리 도구

Context API
React 팀이 공식적으로 지원하는 상태 관리 도구
useState 혹은 useReducer와 함께 사용하여 상태를 관리
상태 관리가 복잡해지는 경우 관리가 힘들어진다.

React에서 많이 사용되는 상태 관리 도구

장단점

Redux

설치

npm install redux react-redux

3가지 원칙

구성 요소

State - 상태

= 어떤 정보를 들고 있다.

**Application이 커질수록 State 관리가 어려워지므로 관리를 잘 하도록 만들자..

Action(객체) - 주문서

상태를 변경시켜달라는 주문서

type과 payload(데이터)를 함께 전달
- type : 겹치면 안되므로 상수로 관리

Reducer

action을 받아 실제적으로 state를 변경하는 로직을 작성하는 함수

state와 action을 연결하기 위한 함수
state와 action을 인자로 받아 다음 state를 return하는 함수

Store 주입하기

주요 Hook

useSelector((state) => state.**)

store에 있는 state를 조회

useDispatch()

store를 변경하기 위해 action을 제출

redux-toolkit

https://redux-toolkit.js.org/

순수 Redux는 복잡해지면 상태관리도 힘들고 코드가 길어져서 사용
편리하게 action, reducer, thunk, immer.js, async reducer를 만들고 사용할 수 있다.

사용법

action과 reducer를 따로 따로 하지 말고 한 번에 Slice로 할 수 있다.

src/store/reducers/todo.js
src/store/store.js

createStore -> configureStore

redux middleware

redux-logger

https://github.com/LogRocket/redux-logger

설치

npm install redux-logger

src/store/store.js

import { combineReducers, createStore } from "redux";
import counterReducer from "./reducers/counter";
import todosReducer from "./reducers/todo";
import { configureStore } from "@reduxjs/toolkit";
import logger from "redux-logger";

const myMiddlewares = [logger];

const rootReducer = combineReducers({
    counter: counterReducer,
    todo: todosReducer,
});
const store = configureStore({
    reducer: rootReducer,
    middleware: (getDefaultMiddleware) => {
        const middlewares = getDefaultMiddleware().concat(myMiddlewares);
        console.log("middlewares", middlewares);
        return middlewares;
    },
});

export default store;