[React.js] 상태 관리 라이브러리 비교 1 - Redux

리액트 프로젝트의 규모가 커질수록 상태관리 라이브러리 도입이 필수적이라는 생각이 들었다.

정말 다양한 상태관리 라이브러리들이 존재하고, 의견도 다양해서 정리해보고자 한다.

 

Redux

상태 관련 로직들을 다른 파일들로 분리시켜서 더욱 효율적으로 관리할 수 있으며 글로벌 상태 관리도 용이하게 만드는 상태관리용 라이브러리이다. 리액트뿐만 아니라 일반 JavaScript 환경에서 사용할 수도 있고, Angular와 같은 다른 프레임워크에서 사용되기도 한다.

 

Redux는 Context API가 지금의 형태로 사용방식이 개선되기도 전에, 그리고 useReduxer라는 Hook이 존재하기 전부터 만들어진 라이브러리이다. 개선되기 전의 Context API는 프로젝트에서 글로벌 상태관리를 하는 것이 굉장히 까다로웠기 때문에, 리덕스가 글로벌 상태 관리 용도로 많이 사용되어 왔다. 하지만, 현재는 단순히 글로벌 상태 관리를 위한 것이라면 Context API 활용만으로 충분할 수 있다.

 

Context API와 Redux 비교

1. 미들웨어

리덕스에는 미들웨어(Middleware)라는 개념이 존재한다. 리덕스의 미들웨어를 사용하면 액션 객체가 리듀서에서 처리되기 전에 우리가 원하는 작업들을 수행 할 수 있다. 예를 들어

특정 조건에 따라 액션이 무시되게 만들 수 있다.

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

미들웨어는 주로 비동기 작업을 처리할 때 많이 사용된다.

 

2. 유용한 함수와, Hooks

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

 

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

 

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

 

3. 커다란 하나의 상태

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

 

Redux의 규칙

1. Store는 무조건 하나만 존재한다.
2. Redux의 state는 읽기 전용이다. (dispatch를 통해서만 state의 변경이 가능하다.)
3. Reducer는 순수 함수로만 구성한다. (순수함수는 동일한 인자가 들어갈 때 항상 같은 값이 나와야 한다. 또한 함수에서 외부의 변수 값을 변경하거나 함수 내로 들어온 인자 값을 변화하게 만드는 일 역시 일어나서는 안된다.)

 

Redux에서 사용되는 키워드

Store

상태 값들을 가지고 있으며 중앙에서 값들을 관리하는 개념으로 생각하면 된다. Reducer에서 데이터 변화를 확인하고 상태값을 변경한다.

Action

상태에 어떤 변화가 필요한 경우 참조하는 객체로, 스토어에 직접 접근할 수 없기 때문에 Action을 먼저 발행한 다음 스토어에서 이 액션을 접수했을 때 상태를 갱신하게 만들 수 있다. Action은 어떤 형태로 실행될지 명시해주는 type 속성을 반드시 가진다.Action 생성함수는 액션을 만드는 함수로, 파라미터를 가져와 액션 객체 형태로 만들어준다. 액션을 사용하기 위해 반드시 액션 생성함수를 만들어야 하는 것은 아니지만, 나중에 컴포넌트에서 쉽게 액션을 발생시키기 위해 작성해주는 것이다.

Reducer

상태에 변화를 일으키는 로직을 가진 함수로, 이전의 상태와 액션을 합쳐서 새로운 상태를 만든다. 따라서 리듀서는 상태, 액션이라는 두 파라미터를 받아오고, 새로운 상태를 만들어 반환한다.

• 초기 상태는 리듀서의 디폴트 인수에서 정의한다.
• 리듀서 함수는 순수함수( 결과 값을 출력할 때 파라미터에 의존해야하고, 같은 결과를 출력하는 함수)여야한다.
• 리듀서 함수에서 상태를 사용하면 반드시 상태의 초기화가 필요하다.
• 상태가 변할 때 전해진 상태는 자체의 값으로 대체 되는 것이 아니고, 합성이 되는 것처럼 쓰여지며 반환된 상태를 스토어에 반영된다.
• Object.Assign()을 사용하거나, 스프레드 문법을 사용해 객체를 리턴해주어야 한다.

Dispatch

sotre의 내장함수 중 하나다. action을 발생시키는 것이 dispatch이며, dispatch라는 함수에 파라미터로 action을 전달한다. 호출이 되면 store에서 reducer 함수를 실행시키고, 해당 액션을 처리하는 로직이 있을 경우 액션을 참고하여 새로운 상태로 만들어준다.

Subscribe

스토어의 값이 필요한 컴포넌트는 스토어를 구독하는데, 이 작업은 react-redux의 connect 함수가 필요하다.

 

Redux 언제 써야 할까?

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

• Yes : Redux
• No : Context API

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

• Yes : Redux
• No : Context API

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

• Yes : Redux
• No : Context API 또는 Mobx

 

---

Reference

6장. 리덕스 · GitBook

Redux는 무엇이고, 어떤 장점이 있는가?