React

[Redux] Redux의 단방향 데이터 흐름

쿠키는 서비스 2023. 10. 29. 20:01
반응형

Redux의 단방향 데이터 흐름이란?

- state는 특정 시점의 앱 상태를 설명한다.

- UI는 해당 상태를 기반으로 렌더링된다.

- 어떤 이벤트가 발생하면 발생한 일에 따라 state가 업데이트 된다.

- 새로운 상태에 따라 UI가 다시 렌더링된다.

위의 이미지는 리덕스에 대해 알고 있어요! 하면 무조건 설명이 가능해야하는 그림이다.

아래의 설명을 외우기보다는 그림을 보며 꼭! 이해해야한다. 사실 별 거 없다ㅎㅎ

Redux에 대해 기억해야 되는 것들

✔️Redux는 전역 어플리케이션 상태를 관리하기 위한 라이브러리이다.

- Redux는 일반적으로 Redux와 React를 함께 통합하기 위해 React-Redux 라이브러리와 함께 사용된다.

- Redux Toolkit는 Redux 로직을 작성하는 데 권장된다.

 

✔️Redux는 "단방향 데이터 흐름" 앱 구조를 사용한다.

- state는 특정 상태를 설명하고 해당 state를 기반으로 UI가 랜더링된다.

- 앱에서 발생하는 과정

    1) UI가 작업(이벤트)를 전달한다.

    2) store은 reducer를 실행하고, 발생한 상황(action type)에 따라 상태가 업데이트된다.

    3) store는 상태가 변경되었음을 UI에게 알린다.

 

✔️Redux는 여러 유형의 코드를 사용한다.

- 작업은 필드가 있는 일반 개체 type이며 앱에서 '무슨 일이 일어났는지'를 설명한다.

- reducer는 이전 상태 + 액션을 기반으로 새로운 state 값을 계산하는 함수이다.

- redux store은 action이 전달될 때마다 root reducer를 실행한다. 

 

 

https://redux.js.org/tutorials/essentials/part-1-overview-concepts

 

Redux Essentials, Part 1: Redux Overview and Concepts | Redux

The official Essentials tutorial for Redux: learn how to use Redux, the right way

redux.js.org

 

반응형