Redux

Redux는 리액트 어플리케이션을 만들 때 전역 상태 관리를 도와주는 라이브러리입니다.

지난 번 context API와 useState 또는 useReducer를 통해 전역 상태 관리를 할 수 있음 배웠습니다.

이것만으로도 전역상태관리를 할 수 있는데 왜 Redux를 사용하는걸까요? 물론, 지금 22년도의 경우 Redux가 그렇게 트렌디한 상황은 아니지만 레거시 코드가 남아있기 때문에 지금 현업에 가도 많이 사용을 하고 있을 것입니다.

그렇다면 왜 이렇게 리덕스를 많이 사용을 했을까요? 리덕스틑 context API와 useState 또는 useReducer를 사용했을 때보다 성능적인 부분에서 좋습니다.

why Redux?

Context API + useState or useReducer 단점

Context API + useState or useReducer의 경우 Provider 하위에서 context를 구독하는 모든 컴포넌트는 Provider의 value props가 바뀔 떄마다 다시 렌더링이 되게 됩니다.

즉, A 컴포넌트에서 value에 있는 값들 중 하나를 사용하고 있는 경우 사용하지 않는 다른 value의 값이 변경되는 경우 A컴포넌트도 리렌더링이 발생하게 되는 것입니다.
(이상황을 피하기 위해 UserContext를 쪼개서 사용을 하기도 합니다.)

Redux

create react-app을 통해 프로젝트를 시작하는 경우 아래와 같이 추가 내용을 작성해 실행하는 경우 redux를 포함한 프로젝트를 시작할 수 있습니다.

초기 프로젝트 시작시

$ npx create-react-app my-app --template redux

진행 중인 프로젝트에 더하는 경우

$ npm install redux
$ yarn add redux

import { createStore } from 'redux'

/**
 * 이것이 (state, action) => state 형태의 순수 함수인 리듀서입니다.
 * 리듀서는 액션이 어떻게 상태를 다음 상태로 변경하는지 서술합니다.
 *
 * 상태의 모양은 당신 마음대로입니다: 기본형(primitive)일수도, 배열일수도, 객체일수도,
 * 심지어 Immutable.js 자료구조일수도 있습니다.  오직 중요한 점은 상태 객체를 변경해서는 안되며,
 * 상태가 바뀐다면 새로운 객체를 반환해야 한다는 것입니다.
 *
 * 이 예제에서 우리는 `switch` 구문과 문자열을 썼지만,
 * 여러분의 프로젝트에 맞게
 * (함수 맵 같은) 다른 컨벤션을 따르셔도 좋습니다.
 */
function counter(state = 0, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1
    case 'DECREMENT':
      return state - 1
    default:
      return state
  }
}

// 앱의 상태를 보관하는 Redux 저장소를 만듭니다.
// API로는 { subscribe, dispatch, getState }가 있습니다.
let store = createStore(counter)

// subscribe()를 이용해 상태 변화에 따라 UI가 변경되게 할 수 있습니다.
// 보통은 subscribe()를 직접 사용하기보다는 뷰 바인딩 라이브러리(예를 들어 React Redux)를 사용합니다.
// 하지만 현재 상태를 localStorage에 영속적으로 저장할 때도 편리합니다.

store.subscribe(() => console.log(store.getState())))

// 내부 상태를 변경하는 유일한 방법은 액션을 보내는 것뿐입니다.
// 액션은 직렬화할수도, 로깅할수도, 저장할수도 있으며 나중에 재실행할수도 있습니다.
store.dispatch({ type: 'INCREMENT' })
// 1
store.dispatch({ type: 'INCREMENT' })
// 2
store.dispatch({ type: 'DECREMENT' })
// 1

사용되는 방법은 useReducer과 매우 유사합니다.