React 외부 구현 상태관리

• React 외부에서 상태를 관리하는 방법
• Redux & Redux Toolkit 이란?
• Redux & Redux Toolkit 사용법

 

 

전역 상태 (Global State)

React 외부에서 상태를 관리하는 방법

 

프로젝트 전체의 상태 관리를 총괄하는 것이다.

전역에서 관리하기 때문에, 어떤 컴포넌트에서든 상태 값을 반영하고, 변경시키는 것이 가능하다.

 

ex)

Redux

Redux Toolkit

Recoil

MobXa

Zustand

Jotai

 

 

Redux & Redux Toolkit?

 

Redux

전역 상태 관리를 위한 라이브러리

모든 상태를 하나의 중앙 저장소(Store)에서 관리한다.

 

복잡한 데이터 흐름이나 상태 관리가 필요할 때 사용하면 좋다.

 

Redux Toolkit

초기 설정과 코드량이 많아질 수 있는 Redux를 보완하기 위해 만들어졌다.

코드 유지 보수성을 향상시킨다.

 

 

Redux & Redux Toolkit 사용법

 

Redux 설치방법

npm install redux react-redux

 

Redux Toolkit 설치방법

npm install @reduxjs/toolkit

 

 

Counter 상태 관리 예시

// Redux의 createStore 함수로 Store 생성
import { createStore } from 'redux';

// counter 함수 = reducer
// 현재 상태(state)와 액션(action)을 받아서 다음 상태를 계산하여 반환
function counter(state = 0, action) { // 초기값 : 0
  switch (action.type) {
    case 'INCREMENT':
      return state + 1
    case 'DECREMENT':
      return state - 1
    default:
      return state
  }

// 앱의 상태를 보관하는 Redux 저장소 만듬
let store = createStore(counter)

// subscribe()를 이용해 Store 상태가 변경될 때마다 호출
store.subscribe(() => console.log(store.getState())))

// dispatch()를 이용해 액션(action)발생
// 내부 상태 변경
store.dispatch({ type: 'INCREMENT' })
// 1
store.dispatch({ type: 'INCREMENT' })
// 2
store.dispatch({ type: 'DECREMENT' })
// 1