Redux

목표

1. 전역 상태 관리 라이브러리로서의 Redux의 필요성을 이해한다
2. Action, Dispatch, Reducer, Store 등 Redux의 핵심 개념을 이해한다
3. React-Redux 라이브러리에서 제공하는 useSelector, useDispatch Hook을 사용할 수 있다

Design Pattern

MVC( Model - View - Controller)
관심사 분리로 코드의 단순화 및 유지보수의 더 높은 수준의 자유가 생긴다.

View

• 브라우저 화면
• 사용자 인터페이스 요소
• Controller에 변경을 통지

Controller

• 특정 동작에 따라 Model과 View를 조작
• 변경을 일으키기 위해 Model과 View를 모니터링
• 즉, 이벤트를 감지하고 처리하는 역할

Model

• 정보, 데이터
• React의 경우 state

Redux

Action - 티켓을 만들어준다
Dispatcher - 전달한다
Store - 저장한다
View - 보여준다

Ex. 다크모드

단방향으로 데이터 바인딩

React의 기능만으로 대응하기 힘들 때 Redux를 사용해라

payload - 전송하는 데이터

1. View에서 유저가 일으키는 행동에 맞게 Action 객체가 생성되고,
2. Action은 Dispatcher를 통해 Reducer로 전달되고,
3. Action의 type에 따라 Reducer 내에 미리 정해져 있던 로직이 Store를 변경하고,
4. 변경된 Store의 내용이 View로 반영되는 패턴이라고 요약할 수 있음.