[스터디 with 실전 리액트 프로그래밍] 15편 - 리덕스

실전 리액트 프로그래밍

 

4장은 리액트 활용법을 다루는데, 블로그에 포스팅하기 애매해서 따로 공부했다.

5장은 클래스형 컴포넌트를 다룬다.

클래스형 컴포넌트 자체가 레거시여서 기존 코드를 작업하지 않는 이상 클래스형 컴포넌트를 접할일이 잘 없다.

그래서 나중에 사용할 일이 생기면 그 때 공부하기로 하고 패스했다.

 

이제 6장.

6장은 리덕스를 다룬다.

리덕스는 리액트를 사용하면서 생기는 많은 불편한 점들을 개선해주는 훌륭한 프레임워크다.

 

 

 

 

리덕스(Redux)

 

리덕스는 자바스크립트를 위한 상태 관리 프레임워크다.

리덕스를 사용하는 이유는 다음과 같다.

 

  - 컴포넌트 코드와 상태 관리 코드를 분리할 수 있다.

  - 서버 렌더링 시 데이터 전달이 간편하다.

  - 같은 상탯값을 다수의 컴포넌트에서 필요로 할 때 좋다.

  - 깊은 곳에 있는 자식 컴포넌트에 props를 전달할 때 편리하다.

  - 모달창과 같은 전역 컴포넌트의 상탯값을 관리할 때 좋다.

  - 페이지가 전환되어도 데이터는 살아 있어야 할 때 좋다.

 

이런 이유로 많은 리액트 프로젝트에서 리덕스를 사용한다

 

 

 

 

세 가지 원칙

 

리덕스 공식 문서는 리덕스를 사용할 때 따라야 할 세가지 원칙을 설명한다.

Three Principles | Redux

 

    1. 전체 상탯값을 하나의 객체에 저장한다.

 

전체 상탯값을 하나의 객체로 저장하면, 서버와 클라이언트가 프로그램의 전체 상탯값을 서로 주고받을 수 있게된다.

최근 상탯값을 저정함으로써 실행 취소와 재실행 기능을 쉽게 구현할 수 있다.

 

 

    2. 상탯값은 불변 객체다.

 

리덕스의 상탯값을 수정하는 유일한 방법은 action 객체와 dispatch 메서드로 액션을 발생시키는 것이다.

 

 

    3. 상탯값은 순수 함수에 의해서만 변경되어야 한다.

 

리덕스의 상탯값을 변경하는 함수를 리듀서(reducer)라고 부른다.

리듀서는 이전 상탯값과 액션 객체를 입력으로 받아서 새로운 상탯값을 만드는 순수 함수다.

순수 함수는 사이드 이펙트를 발생시키지 않아야 하고, 같은 인수에 대해 항상 같은 값을 반환해야 한다.

 

 

 

 

사이클

 

리덕스에서 상탯값이 변경되는 사이클은 다음과 같다.

 

리덕스 상탯값 변경 사이클

 

뷰는 리액트의 컴포넌트라고 생각할 수 있다.

이제 리덕스의 네 가지 요소를 알아보자.

 

 

 

 

액션(Action)

 

액션은 type 속성값을 가진 자바스크립트 객체다. type 속성값은 고유해야한다.

액션 객체를 store의 dispatch 메서드에 넣어서 호출하면 리덕스는 상탯값을 변경한다.

 

store.dispatch({
  type: "todo/ADD",
  title: "영화 보기",
  priority: "high
})

액션과 dispatch로 상탯값을 변경하는 예시 코드다.

 

 

위처럼 직접 액션 객체를 입력하기도 하지만,

생선성을 높이기 위해 액션 객체를 반환하는 함수를 정의해서 사용하자.

const addTodo = ({ title, priority }) => {
  return {
    type: "todo/ADD",
    title,
    priority,
  }
}

store.dispatch(addTodo({
  title: "영화보기",
  priority: "high"
})

 

 

 

 

미들웨어(middleware)

 

미들웨어는 리듀서가 액션을 처리하기 전에 실행되는 함수다.

미들웨어는 함수 세 개가 중첩된 구조로 되어 있다.

const middlewareSample = store => next => action => next(action)

 

 

다음은 미들웨어를 디버깅 목적으로 활용하는 예이다.

const printLog = store => next => action => {
  console.log(`prev state = ${store.getState()}`)
  const result = next(action)
  console.log(`next state = ${store.getState()}`)
  return result
}

 

 

 

 

리듀서(reducer)

 

리듀서는 액션이 발생했을 때, 새로운 상탯값을 만드는 함수다.

 

투두 리스트의 리듀서 함수를 만들어 보자.

function reducer(sate = INITIAL_STATE, action) {
  switch (action.type) {
    case REMOVE_ALL:
      return {
        ...state,
        todos: [],
      }
    // ...
    default:
      return state
  }
}

리덕스의 상탯값은 불변 객체임으로 리듀서는 항상 새로운 객체를 생성한다.

만약 처리할 액션이 없다면 상탯값을 변경하지 않고 그대로 반환한다.

 

 

새로운 객체를 생성할 때, 불변 객체로 관리하기 위해 전개 연산자를 사용한다.

만약 불변 객체가 여러 개의 객체가 중첩된 구조라면 전개 연산자를 사용하기 번거로워진다.

이 때, 자바스크립트의 immer 패키지를 사용하면 편리하게 불변 객체를 관리할 수 있다.

Introduction to Immer | Immer

 

 

 

 

스토어(store)

 

스토어는 리덕스의 상탯값을 가지는 객체다.

스토어는 dispatch 메서드로 액션이 발생하면 미들웨어 함수를 실행한 뒤, 리듀서를 실행해서 상탯값을 새로운 값으로 변경한다.

스토어의 subscrible 메서드를 이용하면 액션이 변경될 때마다 호출할 함수를 등록할 수 있다.

const store = createStore(reducer)
store.subscribe(() => {
  console.log("액션 발생")
})

 

 

 

 

리덕스 툴킷(Redux Toolkit)

 

리덕스는 훌륭한 프레임워크지만 불편한점도 많았다.

설정, 설치해야 할 것도 맣고, 반복되는 코드도 많고, 불변성을 유지하기 어려웠다.

리덕스 툴킷은 리덕스의 이런 불편한 점을 개선한 프레임워크다.

최신 버전의 리덕스 자체에서 리덕스 툴킷의 사용을 권장하고 있다.

리덕스 툴킷을 권장

 

따라서 앞으로 상태 관리 프레임워크를 사용할 일이 있다면, 리덕스 툴킷도 적극 고려해보자.

Redux Toolkit: Overview | Redux

Redux Toolkit | Redux Toolkit

 

 

 

 

코드

 

GitHub - junhee-won/react-study: with 실전 리액트 프로그래밍