리덕스

리덕스는 리액트 생태계에서 사용률이 높은 상태관리 라이브러리이다.

리덕스를 사용하면 컴포넌트들의 상태 관련 로직들을 다른 파일들로 분리시켜서 더욱 효율적으로 관리할 수 있으며 글로벌 상태 관리도 손쉽게 할 수 있다.

Context API를 사용해도 글로벌 상태 관리를 할 수 있고 상태 관리 로직을 분리할 수 있다.

특히 Context API와 useReducer Hook을 사용해서 개발하는 흐름은 리덕스를 사용하는 것과 개발 상식이 유사하다.
리덕스에서도 리듀서와 액션이라는 개념을 사용하기 때문이다.

Redux는 Context API가 지금의 형태로 사용방식이 개선되기도 전에 그리고 useReducer라는 Hook이 존재하기도 전부터 만들어진 라이브러리이다.
사실 Context API가 개선되기 전에는 프로젝트에서 글로벌 상태관리를 하는게 굉장히 까다로웠다. 그래서 리덕스가 글로벌 상태관리 용도로 많이 사용되어 왔다.

리액트를 사용하는 프로젝트 중 45%가 리덕스를 사용하고 있다.
redux는 리액트에서 사용하기 위해 만들어진 라이브러리이긴 하지만 무조건 리액트와 함께 사용할 필요는 없다. 일반 Javascript 환경에서 사용할 수도 있고 Angular와 같은 다른 프레임워크에서도 사용되기도 한다. 이러한 이유 때문에 react-redux보다 redux의 다운로드 수치가 훨씬 높다.

많이 사용된다고 해서 프로젝트에 리덕스가 무조건 필요한 것은 아니다. 물론 잘 활용하면 상황에 따라 그리고 취향에 따라 프로젝트 개발 생산성에 아주 큰 도움을 줄 수도 있다.
하지만 단순히 글로벌 상태 관리를 위한 것이라면 Context API를 활용하는 것만으로 충분할 수 있다.

리덕스를 사용하는 것과 Context API를 사용하는 것의 차이

1.미들웨어

리덕스에는 미들웨어라는 개념이 존재한다. 리덕스로 상태 관리를 할 때에는 useReducer를 사용해 볼 때 접했던 개념인 리듀서 함수를 사용한다. 리덕스의 미들웨어를 사용하면 액션 객체가 리듀서에서 처리되기 전에 원하는 작업들을 수행할 수 있다.

• 특정 조건에 따라 액션이 무시되게 만들 수 있다.
• 액션을 콘솔에 출력하거나, 서버쪽에 로깅을 할 수 있다.
• 액션이 디스패치 됐을 때 이를 수정해서 리듀서에게 전달되도록 할 수 있다.
• 특정 액션이 발생했을 때 이에 기반하여 다른 액션이 발생되도록 할 수 있다.
• 특정 액션이 발생했을 때 특정 자바스크립트 함수를 실행시킬 수 있다.

미들웨어는 주로 비동기 작업을 처리할 때 많이 사용된다.
useReducer Hook에서도 외부 라이브러리를 사용하면 미들웨어를 사용할 수도 있다. 다만 자주 사용되는 방식은 아니다.

2. 유용한 함수와, Hooks

Context API와 useReducer를 사욯 할 때에는 Context도 새로 만들고, Context의 Provider 설정도 하고 각 Context를 편하게 사용하기 위해 전용 커스텀 Hook을 따로 만들어서 사용하기도 한다. 리덕스에서는 이와 비슷한 작업을 편리하게 해줄 수 있는 여러 기능들이 존재한다.

connect 함수를 사용하면 리덕스의 상태 또는 액션 생성 함수를 컴포넌트의 props로 받아올 수 있고 useSlector, useDispatch, useStore과 같은 Hooks를 사용하면 손쉽게 상태를 조회하거나 액션을 디스패치 할 수도 있다.

connect 함수와 useSelector 함수에는 내부적으로 최적화가 잘 이루어져 있어서 실제 상태가 바뀔 때만 컴포넌트가 리렌더링된다. 반면에 Context API를 사용할 때에는 그러한 최적화가 자동으로 이루어져있지 않기 때문에 Context가 지나고 있는 상태가 바뀌면 해당 Context의 Provider 내부 컴포넌트들이 모두 리렌더링 된다.

 

3.하나의 커다란 상태

Context API를 사용해서 글로벌 상태를 관리할 때에는 일반적으로 기능별로 Context 를 만들어서 사용하는 것이 일반적이다.(꼭 그렇게 할 필요는 없다) 반면 리덕스에서는 모든 글로벌 상태를 하나의 커다란 상태 객체에 넣어서 사용하는 것이 필수이다. 때문에 매번 Context를 새로 만드는 수고로움을 덜 수 있다.

 

리덕스 언제 써야 할까?

1. 프로젝트의 규모가 큰가?

• Yes: 리덕스
• No: Context API

2. 비동기 작업을 자주 하게 되는가?

• Yes: 리덕스
• No: Context API

3. 리덕스를 배워보니까 사용하는게 편한가?

• Yes: 리덕스
• No: Context API 또는 Mobx

리덕스가 아무리 좋은 라이브러리라고 해도 취향에 맞지않고 어렵게만 느껴지고 마음에 안들면 사용하지 않는 것이 좋다.

 

1.리덕스에서 사용되는 키워드 숙지하기

액션(Action)

상태에 어떤 변화가 필요하게 될 때는 액션이라는 것을 발생시킨다.

이는 하나의 객체로 표현되는데, 액션 객체는 다음과 같은 형식으로 이루어져 있다.

{
  type: "TOGGLE_VALUE"
}

액션 객체는 type 필드를 필수적으로 가지고 있어야 하고 그 외의 값들은 개발자 마음대로 넣어줄 수 있다.

{
  type: "ADD_TODO",
  data: {
    id: 0,
    text: "리덕스 배우기"
  }
}

{
  type: "CHANGE_INPUT",
  text: "안녕하세요"
}

액션 생성함수

액션 생성함수는 액션을 만드는 함수이다. 단순히 파라미터를 받아와서 액션 객체 형태로 만들어 준다.

export function addTodo(data) {
  return {
    type: "ADD_TODO",
    data
  };
}

// 화살표 함수로도 만들 수 있다.
export const changeInput = text => ({ 
  type: "CHANGE_INPUT",
  text
});