[원티드 프리온보딩 프론트엔드 인턴십 8기] Week 4-2

오늘은 리덕스와 리덕스 미들웨어에 대해서 설명해주셨다. 프론트엔드 개발하게 된다면 뗄 수 없는 것이 전역 상태 관리다. 이것을 쉽게 해주기 위해서 React에서는 ContextAPI를 사용하기도 하지만 보통은 Redux를 사용하여 전역 상태를 개발을 한다.

전역 상태 관리 라이브러리는 mobX, redux, recoil, zustand 등 다양한 것이 있지만 내가 생각했을 때는 Redux-Toolkit까지 사용하게 된다면 코드의 직관성을 조금 더 높일 수 있을 것 같아서 보통 작업을 할 때는 Redux-Toolkit을 사용하고 있었다.

이번 강의에서는 Redux에 middleware를 사용하는 방법에 대해서 학습했다.

 

📝 강의내용

Redux를 학습하기 저에 디자인 패턴에 대해서 학습했다.

• MVC 패턴
  • 이 패턴은 학부생 시절 JAVA를 학습할 때 많이 봤던 패턴이라 기억하고 있다. 
    Model, View, Controller로 나누어서 설계하는 패턴으로 알고 있다.
  • Model: 데이터의 형태를 정의하고, 데이터를 수정하는 역할을 담당한다.
  • View: 모델을 UI로 표현, 사용자의 입력을 받아서 Controller에 전달한다.
  • Controller: 유저의 입력을 받아서 애플리케이션 내에서 어떻게 처리할지 판단 및 가공해서 모델 또는 뷰를 조작한다.
• Flux
  • MVC 패턴에서 발생하는 동작 흐름을 분석하거나 예측할 수 없는 문제가 발생하는 것을 해결하기 위해 페이스북 개발자들이 생각한 디자인 패턴이다.
  • Flux의 핵심은 단방향이다.
  • 양방향으로 인한 연쇄적인 변화로 규정했기 때문에 단방향으로 애플리케이션의 변화 흐름을 최대한 단순화하고 예측가능하게 하는데 목표를 두었다고 한다.
  • Flux 구성요소
    • Action: 어떤 변화를 발생하도록 정의하는 type property와 변화에 필요한 데이터를 담고있는 객체다.
    • Dispatcher: Action을 받아서 Store에 전달하는 역할을 한다.
    • Store: 애플리케이션의 데이터를 저장하고, Dispatch에 전달된 Action에 따라 수정한다.
    • View: Store에 저장된 데이터를 받아서 UI로 표현하고, 유저의 동작에 따라서 Action을 생성한다.

위의 내용을 학습하고 나서 왜 Redux를 학습하기 전에 Flux라는 디자인 패턴에 대해서 학습을 했는지 알게 되었다. 
Redux에서 구성된 요소가 Flux와 비슷하기 때문이다.

• Redux 구성요소
  • View: 유저에게 보이는 UI, store의 state를 기반으로 그려진다.
  • Action: 어떤 일이 일어났는지를 묘사하는 객체이다.
  • Reducer: 이전 state 값과, action 객체를 인자로 받아서 새로운 state를 리턴하는 순수 함수이다.
    • 새로운 state는 오로지 기존의 state와 action 객체를 통해서만 계산되어야한다.
    • Reducer는 기존의 state를 수정해서는 안된다. 기존의 state를 복사하고, 복사한 state에 변화를 주어야 한다.
    • Reducer 내부에서는 비동기 통신, 랜덤 값을 사용하는 것 등의 그 어떤 사이드 이펙트도 수행되서는 안된다.
  • Store: Redux의 모든 state를 관리하는 객체이다.
  • Dispatch: Action 객체를 store에 전달하고, store는 Reducer를 통해서 새로운 state를 만들어낸다.
  • Selectors: store에 특정한 state만 가져오기 위한 함수이다.
• Middleware
  • 프레임워크의 요청과 응답 사이에 추가할 수 있는 코드
  • 미들웨어를 통해서 리덕스를 조금 더 편리하게 사용할 수 있도록한다.