redux

죠현졍·2022년 7월 17일
0

TIL

목록 보기
6/6

📘 Flux

양방향 데이터 흐름(MVC) 때문에 생긴 복잡성을 해결하기 위해, 단방향 데이터 흐름으로 만들어낸 아키텍쳐

액션 생성자

액션이란 어떤 액션인지를 가리키는 type 과 넘겨받은 값인 payload 를 가진다.

액션 생성자는 기존 상태를 변경하기 위한 액션의 생성을 담당하며 해당 액션을 생성해서 디스패쳐에 넘겨준다.

디스패쳐

디스패쳐는 모든 액션들을 받아서 의존성을 적절히 처리해준 다음 모든 스토어에게 넘긴다.

여기서 중요한 점은 모든 스토어가 모든 액션을 받는다는 것이다.

스토어

스토어는 모든 액션을 받아서 자신에게 적합한 액션이 어떤 건지 필터링한다.

이후 상태값을 변경하고 자신에게 연결된 컨트롤러 뷰에게 상태가 변화되었음을 알린다.

컨트롤러 뷰

여기서 컨트롤러 뷰는 전체적으로 화면에 나타는 자식 뷰들과 스토어를 연결하는 매개체이다.

자식 뷰들은 컨트롤러 뷰에게 변화된 상태를 받고 그 상태에 따라 다시 렌더링이 된다.

🔧 동작방식

  1. 유저가 View를 조작함으로써 Action이 발생
  2. state 갱신 내용을 Action이 Dispatcher에 전달
  3. Dispatcher가 Store에 Action을 전달하면서, Store에게 state 갱신을 명령
  4. Store가 state를 갱신
  5. 갱신된 state를 View에게 전달
  6. 새로운 state가 브라우저(View)에 렌더링(표시)

애플리케이션 내의 모든 ActionDispatcher에 집약시킴으로써, 단방향 데이터 흐름을 이뤄냈다.

View에서 발생한 Action은 반드시 Dispatcher를 거치게 되며, Dispatcher는 Action 내용을 바탕으로 Store에게 state의 갱신을 명령하며, View는 변경된 데이터를 Store를 통해서 전달받는다.

이러한 Flux의 단방향 데이터 흐름은 기존의 MVC 패턴에 있던 state의 전이를 없애주고, 데이터의 흐름을 단순화시켜 예측 가능하게 해줌으로써 state 관리를 용이하게 해주도록 해준다.

🟪 Redux

Flux + reducer ⇒ flux 기반의 상태 관리 라이브러리
단방향 데이터 흐름의 중요성을 강조하고 type필드가 있는 작업을 통해 상태를 조정한다는 점에서 flux와 유사하다.

🤷‍♀️ flux와 redux의 차이점

1️⃣ store는 state를 저장하는 것에만 책임이 있다.

flux의 store는 갱신 및 보관의 기능을 수행한다.

하지만, redux는 단순히 state를 보관하는 기능만 하며, 갱신 기능은 reducer에서 한다.

2️⃣ reducer

action을 인수로 받고, state의 복사본을 반환하는 순수함수이다.

redux는 상태를 변경할 수 없는 것으로 간주 (immutable)한다.

반면에, flux는 state가 mutable하다.

3️⃣ no dispatcher

redux는 store가 하나라서 그냥 action을 분류해 store로 향하면 되기 때문에 dispatcher가 없다.

👍 장점

1️⃣ 핫리로딩이 가능하다.

flux의 store는 갱신 및 보관의 기능을 수행하기 때문에 핫리로딩이 불가능하다.

⇒ 업데이트 코드를 리로딩하면, 상태도 리로딩 되기 때문에 저장된 상태 정보를 잃어버림

하지만, 리덕스는 store가 단순히 보관 기능만 수행하기 때문에 핫리로딩이 가능하다.

2️⃣ 시간 여행 디버깅이 가능하다.

0개의 댓글