Redux
MVC 패턴 (기존)
양방향 데이터 흐름
-
Model에 데이터 정의,Controller로 Model 데이터 CRUD, 변경된 데이터는View에 출력 -
대규모 프로젝트에서 데이터 변경 사항을 신속하게 전파하기 어려움 🙁
Flux 패턴
단방향 데이터 흐름
-
Action
- state를 변경할 수 있는 명령어와 같다.
- 새로 발생한 액션의type과 데이터payload로 구성됨
{type: "UPDATE_MATH", payload: ["A", "75"]}
- Dispatcher로 전달된다. -
Dispatcher
- action 객체를 감지하는 순간 콜백함수로 Store에 전달된다. -
Store (Model)
-state와 state를 변경할 수 있는method를 가지고 있다.
- action type에 따라 무엇을 할지 결정하고, 상태를 변경한다.
-
View
- 컨트롤러 뷰: 스토어에서 변경된 데이터를 가져와 모든 자식 뷰에게 데이터를 분배한다.
- 데이터를 넘겨받은 뷰는 화면을 새로 렌더링한다.
Redux != Flux
- Redux는 Flux 패턴과 Reduce를 합친 개념
- Reducer : Dispatcher + Store 기능
LifeCycle
View에서 이벤트 발생action생성 ➡dispatch함수의 인자로 전달됨Dispatch는 action을store로 전달- Store에서 Reducer로 action이 전달되기 전에 비동기 처리와 같은 추가적인 작업이 있을 경우
middleware에서 처리하고 결과값을reducer로 dispatch 시킨다. - Reducer에서 action 객체를 받아서 기존 state를 기반으로 state 값을 업데이트한다.
- 업데이트된 state값이
view로 전달되어 화면에 나타난다.
Rules of Redux
1. 하나의 애플리케이션 안에는 하나의 스토어가 있다.
2. state는 읽기전용이다. (리액트의 불변성)
-
상태를 수정하는 유일한 방법은
dispatch()에 Action 객체를 담아 호출하는 것 뿐이다. -
Action 객체는 plain 자바스크립트 객체!
ex.{ type: "ADD_TODO", payload: { title: "do study", content: "react" } }📕 상탯값 수정이라는 하나의 목적만 놓고 보면 불변 객체를 사용하는 것보다는 상탯값을 직접 수정하는 게 더 빠르다. 하지만 이전 상탯값과 이후 상탯값을 비교해서 변경 여부를 파악할 때는 불변 객체가 훨씬 유리하다. 상탯값 변경을 빠르게 확인할 수 있으면 메모이제이션과 같은 기능을 활용하기 좋고, 리액트의 렌더링 성능을 올리는 데도 유리하다. - 이재승, <실전 리액트 프로그래밍>, 251p
-
상태를 업데이트 할 때는 불변성을 지켜야 한다. 기존의 state를 기반으로 새로운 state를 생성하여 덮어 쓰는 방식(ex.
Object.assignorspread operator)으로 복사본을 만들어 업데이트해야 한다.
setState([...state, newItem]);3. Reducer는 순수한 함수여야 한다.
순수함수란?
- 동일한 인자가 들어오면 항상 같은 값을 리턴하는 함수
- 외부의 상태에 영향(Side Effect, 부수 효과)을 주지 않는 함수
Side effect : 함수 외부의 state 혹은 behavior에 변화를 주는 것
- new Date(), 랜덤 숫자 생성, 네트워크 요청 등 값이 변할 수 있는 작업은 리듀서 밖에서 처리 (ex. middleware)
Middleware란?
Reducer에서 action을 디스패치에서 받아와서 업데이트하기 전에 추가적인 작업을 할 수 있다.- redux-thunk, redux-saga 등이 있음
- 리덕스에서 미들웨어를 사용하는 주 목적 = 비동기 작업 처리!
- "share props between components and prevent prop-drilling" ->
Context API로도 충분!
- "share props between components and prevent prop-drilling" ->
🔗 Reference
