Redux 설치 및 소개

공식문서로 마스터하는 리덕스

May 08, 2024

Contents

Redux 란??Redux Toolkit Flux 패턴이란?Action Dispatcher Store (Model)Redux 와 Flux의 관계 설치 사용법 Redux core 사용예시 Redux Toolkit 사용예시 Redux Toolkit 을 사용해야하는 이유

Redux 란??

Redux는 "액션"이라는 이벤트를 사용하여 애플리케이션 상태를 관리하고 업데이트하기 위한 패턴 및 라이브러리다.
Redux는 애플리케이션의 여러 부분에 필요한 상태인 "전역" 상태를 관리하는 데 도움을 주는 역할을 한다.

Redux Toolkit

많은 사람들이 redux에 관한 단점에 대해 얘기할 때 boilerplate(보일러 플레이트)에 대해 말한다. 리덕스는 이런 보일러 플레이트를 제거하고, 흔한 실수를 방지하고, 기본적인 Redux 작업을 간단하게 만드는 API를 제공하기 위해 Redux Tookit을 만들었다.
아래에서는 두 가지 예시가 모두 나올 것이다.

Flux 패턴이란?

사용자 입력을 기반으로 Action을 만들고 action을 Dispatcher에 전달해 Store(model)의 테이터를 변경한 뒤 View에 반영하는 단방향의 흐름으로 애플리케이션을 만드는 구조다.
대규모 애플리케이션에서 데이터 흐름을 일관성 있게 관리해 프로그램의 예측가능성을 높이기 위해 만들어진 패턴이다.

Action

데이터를 변경하는 행위로 Dispatcher에서 전달되는 객체를 의미한다.

Dispatcher

모든 데이터의 흐름을 관리하는 중항 허브다.
Action을 감지하면 Store들이 각 타입에 맞는 콜백함수를 실행하는데 이 조작은 Dispatcher를 통해서만 가능하다.

Store (Model)

상태 저장소로 상태와 상태를 변경할 수 있는 메서드를 갖고 있다.
어떤 타입의 Action이 발생했는지에 따라 그에 맞는 데이터 변경을 수행하는 콜백 함수를 등록한다.

View

리액트 컴포넌트 정도로 생각하면 편하다.

Redux 와 Flux의 관계

redux 는 flux패턴을 이용하여 상태관리를 할 수 있도록 도와주는 라이브러리다.
유일한 다른점은 reducer의 존재이다.

view에서 dispatcher를 이용해 action을 reducer에 전달
reducer에서 action에 맞는 행동을 취해 store에 데이터 저장
store에 저장되어있는 데이터를 view에 가져다 사용

설치

아래 명령어를 통해 설치한다.

toolkit 버전
npm install @reduxjs/toolkit
or 
yarn add @reduxjs/toolkit

core 버전
npm install redux
or
yarn add redux

아예 cra를 할 때 리덕스와 같이 만들어줄 수도 있다.

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

사용법

우리의 모든 상태는 하나의 저장소(store)안의 객체 트리에 저장되게 된다.
상태를 변경할 수 있는 유일한 방법은 액션(action)을 보내는 것 뿐이다.
액션이 상태트리를 어떻게 변경할지 명시하기위해 우리는 리듀서(reducer)를 작성해야한다.

Redux core 사용예시

const ADD_TODO = 'ADD_TODO'
const TODO_TOGGLED = 'TODO_TOGGLED'

export const addTodo = text => ({
  type: ADD_TODO,
  payload: { text, id: nanoid() }
})

export const todoToggled = id => ({
  type: TODO_TOGGLED,
  payload: id
})

export const todosReducer = (state = [], action) => {
  switch (action.type) {
    case ADD_TODO:
      return state.concat({
        id: action.payload.id,
        text: action.payload.text,
        completed: false
      })
    case TODO_TOGGLED:
      return state.map(todo => {
        if (todo.id !== action.payload.id) return todo

        return {
          ...todo,
          completed: !todo.completed
        }
      })
    default:
      return state
  }
}

Redux Toolkit 사용예시

import { createSlice } from '@reduxjs/toolkit'

const todosSlice = createSlice({
  name: 'todos',
  initialState: [],
  reducers: {
    todoAdded(state, action) {
      state.push({
        id: action.payload.id,
        text: action.payload.text,
        completed: false
      })
    },
    todoToggled(state, action) {
      const todo = state.find(todo => todo.id === action.payload)
      todo.completed = !todo.completed
    }
  }
})

export const { todoAdded, todoToggled } = todosSlice.actions
export default todosSlice.reducer

Redux Toolkit 을 사용해야하는 이유

Redux 팀에서 권장하고 있다. ( 정말 강력하게 )
코드를 단순화하고 많은 일반적인 Redux 실수와 버그를 제거한다.
- 보일러 플레이트가 많았는데 이를 획기적으로 줄여준다.
수 많은 Redux Toolkit의 장점
- Redux Toolkit은 스토어 설정을 한번의 함수 호출로 단순화하면서, 필요시 스토어의 옵션을 완전히 구성할 수 있는 기능을 유지한다.
- Redux버그의 #1 원인이었던 우발적인 상태 변이를 제거한다.
- 수동으로 액션 생성자 또는 액션 타입을 작성할 필요가 없게 만든다.
- Redux Toolkit은 수동으로 작성해야하고 오류도 발생하기 쉬운 불변 업데이트 로직을 작성할 필요가 없다.
- Redux Toolkit은 Redux 기능의 코드를 여러 개의 분리된 파일에 분산하는 대신 단일 파일에 작성하기 쉽게 만들어준다.
- Redux Toolkit은 우수한 TypeScript 지원을 제공하며, 코드에서 정의해야하는 타입의 수를 최소화하고 높은 타입 안전성을 제공하기 위해 설계된 API를 제공한다.
- RTK Query를 사용하면 데이터를 패칭하고 로딩 상태를 추적하는 데 필요한 어떠한 thunks, 리듀서, 액션 생성자 또는 이펙트 훅도 작성하지 않아도 된다.