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
'React' 카테고리의 다른 글
React 불변성을 지켜야 하는 이유? (0) | 2023.11.21 |
---|---|
React Component 나누는 기준, 메모이제이션?, useRef, useMemo, useCallback (0) | 2023.11.17 |
[Redux] Redux를 쓰는 이유? props 귀찮아. 디버깅 쉽게. (0) | 2023.10.28 |
React 클래스형 컴포넌트 (0) | 2021.09.01 |
React에서 사용하면 안되는 속성(class, for) (0) | 2021.06.30 |