[React] 리덕스 시작!

이번 카테고리도 마찬가지로 벨로퍼트님의 블로그 자료를 보고 공부한 내용을 바탕으로 합니다.

---

Redux?

• 리액트에서 가장 많이 사용되는 상태 관리 라이브러리 중 하나
• 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 효율적으로 관리 가능!

 

 

Redux vs Context API

1️⃣ Middleware

• 리덕스에는 미들웨어라는 개념이 존재
• 리덕스로 상태관리를 할 때, 우리가 useReducer을 사용해볼 때 접했던 개념인 리듀서 함수를 사용
• 리덕스의 미들웨어를 사용하면 액션 객체가 리듀서에서 처리되기 전에 우리가 원하는 작업들을 수행할 수 있다.
  1. 특정 조건에 따라 액션 무시
  2. 액션을 콘솔에 출력 or 서버쪽에 로깅
  3. 액션이 디스패치 됐을 때, 서버 쪽에 로깅
  4. 특정 액션이 발생했을 때, 이에 기반하여 다른 액션이 발생되도록 함
  5. 특정 액션이 발생했을 때, 특정 자바스크립트 함수를 실행 시킬 수 있음.
• useReducer Hook 에서도 외부 라이브러리를 사용하면 미들웨어를 사용할 수 있다. 자주 사용되는 방식은 아님!

 

2️⃣ 유용한 함수와, Hooks

이전, ContextAPI 와 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. 프로젝트 규모가 클 때
2. 비동기 작업을 자주하게 될 때
3. 리덕스 사용법이 더 편할때

위의 경우와 반대될 때가 있다면 Context API혹은 MobX를 쓰는게 더 편하고 좋을 수도 있다!

 

---

Reference

벨로퍼트의 모던 리액트