리덕스(Redux)

리액트 생태계에서 가장 사용률이 높은 상태관리 라이브러리 입니다.

1. 사용하는 이유

1. 컴포넌트들의 상태 관련 로직들을 다른 파일들로 분리시켜서 더욱 효율적으로 관리 가능
2. 글로벌 상태 관리도 손쉽게 할 수 있다.
3. props 드릴링을 막을 수 있다.

Context API 의 useReducer Hook 을 사용해서 개발하는 흐름은 리덕스를 사용하는 것과 매우 유사 합니다. -> 리덕스에서도 리듀서와 액션이라는 개념을 사용하기 때문!

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

2.1 미들웨어(Middleware)

리덕스에는 미들웨어라는 개념이 존재 합니다.

• 리덕스 미들웨어를 사용하면 액션 객체가 리듀서에서 처리되기 전에 원하는 작업을 수행 가능

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

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

2.2 유용한 함수와, Hooks

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

• connect 함수를 사용하면 리덕스의 상태 또는 액션 생성 함수를 컴포넌의 props로 받을 수 있다.
• useSelector, useDispatch, useStore 등 여러가지 존재

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

3. 하나의 커다란 상태

리덕스는 모든 글로벌 상태를 하나의 커다란 상태 객체에 넣어서 사용하는 것이 필수 입니다.

참고

• https://react.vlpt.us/redux/