Redux

Redux

• React 생태계에서 가장 사용률이 높은 상태 관리 라이브러리이다.
• 컴포넌트의 상태 관련 로직들을 다른 파일들로 분리시켜 효율적으로 관리할 수 있고, 글로벌 상태 관리도 손쉽게 할 수 있다.
• Reducer 와 action 의 개념을 사용하기 때문에 Context API 와 useReducer hook 을 사용하여 개발하는 것과 매우 유사하다.

Redux 와 Context API를 사용하는 것의 차이

1. 미들웨어

리덕스로 상태 관리를 할 때에는 리듀서 함수를 사용하는데, 리덕스의 미들웨어를 사용하면 액션 객체가 리듀서에서 처리되기 전에 원하는 작업들을 수행할 수 있다. 예를 들면,

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

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

2. 유용한 함수와, Hooks

Context API 와 useReducer 를 사용할 때에는 Context 도 새로 만들고, Context 의 Provider 설정도 하고, 각 Context 를 편하게 사용하기 위해 전용 커스텀 hook 을 따로 만들어서 사용하기도 했다.

하지만 리덕스에서는 connect 함수를 사용하여 리덕스의 상태 또는 액션 생성 함수를 컴포넌트의 props 로 받아올 수 있으며, useSelector, useDispatch, useStore 와 같은 hook 을 사용하여 손쉽게 상태를 조회하거나 액션을 dispatch 할 수 있다.

3. 하나의 커다란 상태

Context API 를 사용하여 글로벌 상태를 관리할 때에는 일반적으로 기능별로 Context 를 만들어서 사용하는 것이 일반적이다. 하지만 리덕스에서는 모든 글로벌 상태를 하나의 커다란 상태 객체에 넣어서 사용하는 것이 필수이다. 따라서 매번 Context 를 새로 만들 필요가 없다.

리덕스 언제 써야 할까?

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

• Yes: 리덕스
• No: Context API

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

• Yes: 리덕스
• No: Context API

3. 리덕스를 배워보니까 사용하는게 편한가?(자신에게 잘 맞는가?)

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