처음 만난 리덕스 (Redux) 문서


1.4 Redux Data Flow

지금부터는 Redux Data Flow. 즉, Redux의 데이터 흐름에 대해서 살펴보도록 하겠습니다.

Redux Data Flow
https://redux.js.org/tutorials/fundamentals/part-2-concepts-data-flow

이 그림은 Redux 공식 문서에서 Redux의 데이터 흐름을 시각화하여 표현한 것입니다.
여기에 나오는 각각의 구성 요소들에 대해서는, 뒷부분에서 자세히 배울 예정이기 때문에 지금 다 이해할 필요는 없습니다.
여기에서는 그냥 Redux에서 데이터의 흐름이 이렇게 흘러가는구나 정도만 알고 넘어가면 됩니다.

그럼 데이터의 흐름을 한 번 살펴볼까요?

  1. 먼저 사용자가 UI에서 Deposit 10$ 버튼을 누릅니다.
  2. 그러면 클릭 이벤트가 이벤트 핸들러로 전달이 되고, Action이 만들어지고 Dispatch됩니다.
  3. Dispatch된 Action은 현재 State와 함께 Reducer로 전달이 되며,
  4. Reducer에서는 변경된 새로운 State를 리턴합니다.
  5. 그리고 이렇게 변경된 새로운 State가 UI에 나타나게 됩니다.

마지막 업데이트: 2023년 07월 14일 00시 00분

이 문서의 저작권은 이인제(소플)에 있습니다. 무단 전재와 무단 복제를 금합니다.