리덕스 총정리 : React Redux, redux/toolkit

Redux는 JavaScript 애플리케이션의 상태(state)를 관리하기 위한 상태 관리 라이브러리 중 하나입니다.

특히 복잡한 애플리케이션의 상태를 관리하기 용이하도록 설계되었습니다.

Redux는 JavaScript 애플리케이션의 상태를 효과적으로 관리하기 위한 도구로, 단일 상태 스토어와 액션-리듀서 구조를 기반으로 합니다. 리액트와 직접적으로 연결되어 있는 것은 아니며, 다른 JS 프레임워크나 라이브러리와 함께 사용될 수도 있습니다. 애플리케이션의 모든 상태를 하나의 전역 상태로 저장합니다. 이 상태는 애플리케이션 내의 모든 컴포넌트에서 접근 가능합니다. Redux의 핵심 원칙은 "단일 소스의 진리(Single Source of Truth)"입니다. 이것은 애플리케이션 전체의 상태를 하나의 스토어(store)에 저장하고, 해당 상태는 읽기 전용(immutable)으로 관리된다는 개념을 말합니다.

React에서 Redux를 많이 사용하는 이유

1. 편의성: 모든 컴포넌트가 props없이 state를 직접 꺼내서 쓸 수 있습니다.

2. 커뮤니티와 생태계의 지원: Redux는 많은 개발자들이 사용하고 있으며, 관련된 다양한 라이브러리와 플러그인들이 존재합니다. 이러한 생태계의 지원을 통해 Redux를 사용하는 개발자들은 문제를 해결하고 새로운 기능을 추가하는 데 도움을 받을 수 있습니다.

3. 유지보수의 용이: 버그 추적이 쉽습니다(store.js에서 찾으면 끝)

// 리덕스 설치
$ npm install @reduxjs/toolkit react-redux

// package.json 에서 아래 두 항목은 "18.1.x" 이상 버전이어야 함
    "react": "^18.2.0",
    "react-dom": "^18.2.0",

리덕스 설치 후

  1. src 폴더 내 store.js 생성

  2. index.js 혹은 main.tsx에 Provider를 이용하여 감싸주면 사용준비 완료

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { BrowserRouter } from "react-router-dom";
import { Provider } from "react-redux";
import store from "./store.js";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  // <React.StrictMode>
      <Provider store={store}>
        <BrowserRouter>
          <App />
        </BrowserRouter>
      </Provider>
  // </React.StrictMode>
);

주요개념

  1. 스토어: Redux 앱의 하는 객체

    상태를 저장

  2. 액션: , dispatch 메서드를 사용하여 리덕스 스토어로 액션을 전달합니다.

    상태 변화의 요청

  3. 디스패치: 상태를 업데이트하고 입니다. Redux에서 액션을 디스패치하면, 해당 액션에 대응하는 리듀서가 호출되어 상태가 변경

    액션을 트리거하는 메서드