Redux 시작하기

Redux는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너입니다.

1. 설치

1.1. Redux Toolkit

• Redux Toolkit은 Redux 로직을 작성하기 위해 공식적으로 추천하는 방법입니다.
• Redux 앱을 만들기 위해 필수적인 패키지와 함수를 포함하고 있습니다.

• Redux Toolkit은 NPM에서 패키지로 받아 모듈 번들러나 Node 앱에서 사용 가능합니다.
• NPM

  $ npm install @reduxjs/toolkit

• Yarn

  $ yarn add @reduxjs/toolkit

1.2. React Redux 앱 만들기

• React와 Redux로 새 앱을 만들기 위해 추천하는 방법은 Create React App의 Redux+JS 탬플릿을 사용하는 것입니다.
• 이를 통해 Redux Toolkit과 React Redux가 React 컴포넌트와 통합이 가능합니다.

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

1.3. Redux 코어

• Redux 코어 라이브러리는 NPM에서 패키지로 받아 모듈 번들러나 Node 앱에서 사용이 가능합니다.
• NPM

  $ npm install redux

• Yarn

  $ yarn add redux

2. 기본 예제

• 기본 예제로 전반적인 Redux에 대한 개념을 알아보겠습니다.
• 자세한 내용은 추후에 알아볼 예정이니 한번에 이해하려 하기 보다는 흐름을 봐주세요.

import { createStore } from 'redux';

function counter(state = 0, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1
    case 'DECREMENT':
      return state - 1
    default:
      return state
  }
}

// Redux 저장소
let store = createStore(counter);

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

store.dispatch({ type: 'INCREMENT' })    // 1
store.dispatch({ type: 'INCREMENT' })    // 2
store.dispatch({ type: 'DECREMENT' })    // 1

• counter 함수
  - counter 함수를 리듀서 함수(Reducer Function)라고 합니다.
  • 인자로 state와 action을 받습니다.
  • state는 초기값으로 0을 가지고 있고, 리듀서 함수에서 해당 값을 업데이트 합니다.
  • action은 상태 트리를 변경하기 위해 무엇이 일어날지 서술하는 객체입니다.
  • 상태를 바로 변경하는 대신, 액션으로 일어날 변경 사항을 명시합니다.
• store 변수
  • store 변수는 Redux 저장소입니다.
  • Redux 저장소에서 앱의 상태를 보관합니다.
  • API로는 subscribe, dispatch, getState가 있습니다.
• subscribe()
  • subscribe()를 이용하면 상태 변화에 따라 UI를 변경할 수 있습니다.
  • 보통 subscribe()를 직접 사용하기 보다는 뷰 바인딩 라이브러리를 사용합니다.
• dispatch()
  • dispatch()로 액션을 내보내 상태를 변경할 수 있습니다.

• 보통 Redux 앱에는 하나의 루트 리듀서 함수를 가진 단 하나의 저장소가 있습니다.
• 앱이 커지면 루트 리듀서를 상태 트리의 서로 다른 부분에서 개별적으로 동작하는 작은 리듀서들로 나눌 수 있습니다.
  - React에서 하나의 루트 컴포넌트에서 시작해서 여러 작은 컴포넌트의 조합으로 바꾸는 것과 동일합니다.
• 액션에 따라 모든 변경을 추적할 수 있기 때문에 매우 강력한 개발자 도구를 가능하게 해줍니다.
• 사용자 세션을 기록한 다음 액션 하나하나를 다시 실행해 볼 수 있습니다.

3. Redux는 언제 사용해야 할까?

- 앱의 많은 곳에서 많은 양의 상태가 필요할 때
- 앱의 상태가 자주 업데이트될 때
- 상태를 업데이트하는 로직이 복잡할 때
- 앱의 코드 양의 많고, 많은 사람들과 일할 때
- 시간이 지남에 따라 상태가 어떻게 변화하는 지 보고 싶을 때

• 모든 앱에서 Redux가 필요하지 않기 때문에, 지금 자신이 만들고자 하는 애플리케이션에 Redux가 필요한 지 반드시 따져봐야 합니다.
• Redux를 언제 사용하면 좋은지에 대한 부분은 공식 문서에서 더 자세하게 확인하세요.

출처
🔗 공식 문서: https://ko.redux.js.org/introduction/getting-started
🔗 Github: https://github.com/chaevivin/Front-end_study/blob/main/Redux/Start_Redux.md
더 자세하게 정리되어 있고, 번역된 문서를 보고싶다면 Github에서 제가 작성한 문서를 확인하세요.