[항해99] Day22. TIL – Redux를 사용하는 것과 Context API 사용의 차이점

👩🏻‍💻 Today I Learned 📚

 

 

✨ Redux – Middleware vs Context API

• 미들웨어

Redux 에는 미들웨어(Middleware)라는 개념이 존재합니다. 리덕스로 상태 관리를 할 때에는 우리가 [userReducer] 를 사용해볼 때 접했던 개념인 reducer 함수를 사용합니다. 리덕스의 미들웨어를 사용하면 액션 객체가 리듀서에서 처리되기 전에 우리가 원하는 작업들을 수행 할 수 있습니다. 예를 들자면..

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

-액션을 콘솔에 출력하거나, 서버쪽에 로깅을 할 수 있습니다.

-액션이 디스패치 됐을 때 이를 수정해서 리듀서에게 전달되도록 할 수 있습니다.

-특정 액션이 발생했을 때 이에 기반하여 다른 액션이 발생되도록 할 수 있습니다.

-특정 액션이 발생했을 때 특정 자바스크립트 함수를 실행시킬 수 있습니다.

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

useReducer Hook 에서도 외부 라이브러리를 사용하면 미들웨어를 사용 할 수도 있습니다. 다만, 자주 사용되는 방식은 아닙니다.

• 유용한 함수와, Hooks 우리가 이전에 Context API 와 useReducer 를 사용 할 때에는 Context 도 새로 만들고, Context 의 Provider 설정도 하고 각 Context 를 편하게 사용하기 위해 전용 커스텀 Hook 을 따로 만들어서 사용하기도 했는데요, 리덕스에서는 이와 비슷한 작업을 편리하게 해줄 수 있는 여러 기능들이 존재합니다.
• Connect 함수를 사용하면 리덕스의 상태 또는 액션 생성 함수를 컴포넌트의 props 로 받아올 수 있으며며, useSelector, useDispatch, useStore 와 같은 Hooks를 사용하면 손쉽게 상태를 조회하거나 액션을 디스패치 할 수도 있죠.
  Connect 함수와 useSelector 함수에는 내부적으로 최적화가 잘 이루어져 있어서 실제 상태가 바뀔 때만 컴포넌트가 리렌더링됩니다. 반면에 Context API를 사용할 때에는 그러한 최적화가 자동으로 이루어져있지 않기 때문에 Context 가 지니고 있는 상태가 바뀌면 해당 Context 의 Provider 내부 컴포넌트들이 모두 리렌더링 되지요.
• 하나의 커다란 상태 Context API 를 사용해서 글로벌 상태를 관리 할 때에는 일반적으로 기능별로 Context를 만들어서 사용하는 것이 일반적입니다 (물론 꼭 그렇게 할 필요는 없습니다). 반면 리덕스에서는 모든 글로벌 상태를 하나의 커다란 상태 객체에 넣어서 사용하는 것이 필수입니다. 때문에 매번 Context를 새로 만드는 수고로움을 덜 수 있습니다.
  
  
  

💜 회고

지난 주에 빌드했던 ox 퀴즈를 이제 파이어베이스에 데이터를 저장해두고 리덕스를 이용해서 가져오는 것을 했는데, 왜인지 모르겠지만 계속해서 오류만 났다. 하루 종일 빨간 화면만 바라보고 있었다. 😓 겨우 겨우 방향성을 찾아서 해결을 했고, 배포까지 완료했다! 하루종일 빨간 오류만 보고 있자니 답답해서 미칠 노릇 ㅠ 오늘 하루 종일 매달려서 풀어내서 기쁘기도했지만 리덕스와 파이어베이스의 연결을 제대로 이해한건지 스스로가 의심이 들었다. 너무 많은 엉터리 코드를 써서 ㅋㅋㅋㅋ 제대로 풀어냈음에도 헷갈리는 지경에 이르렀다. ㅎㅎㅎ 내일부터 본격적으로 작업에 들어갈 개인과제를 하면 확실하게 개념을 잡아낼 수 있기를!