디자인 패턴
소프트웨어를 설계하면서 자주 발생하는 문제에 대한 모범답안을 디자인 패턴 이라고 한다.
MVC (model view controller)
모든 복합 패턴의 근간
- model :데이터의 형태를 정의하고 수정하는 역할을 담당
- controller : 흔히 로직이라고 불림 인터랙션 이벤트의 행동을 정의
- view : 모델을 ui로 표현
- view 에서 인터랙션 발생
- controller 에게 input 전달
- model 에게 수행을 전달
- 업데이트된 데이터를 view 에게 요청
dark light 모드에서는 view controller 에서만 통신이 일어남
본론으로 돌아가서 결국 양방향 통신 이 일어난다는 것.
하지만 react를 개발한 meta(facebook)에서 MVC 패턴의 문제점이 드러났다.
controller 에서 변경한 view가 다른 데이터와 연결되어있어 (양방향) DM 기능에 문제가 발생.
Flux
이로써 페이스북팀 개발자는 새로운 디자인 패턴인 flux패턴을 발표
action - dispatcher - store - view
- Action : 어떤 변화를 발생시킬지 정의하는 type. 데이터를 담은 간단한 객체
- dispatcher : action 을 받아서 store 에 저장하는 역할 수행
- store : 데이터 저장 및 action 에 따라 데이터 수정
- view : store 에 저장된 데이터를 받아서 UI에 표현.view에서도 action 이 발생하면 dispatcher 로 전달.
변화 파악이 쉽고 애플리케이션의 동작을 예측하기 쉬움. 단방향이기 때문에 연쇄수행이 없음.
useDispatch() useReducer()는 완벽히 flux 를 따르고 있다.
Redux
Redux 는 flux, CQRS, Event sourcing 의 개념을 사용해서 만든 라이브러리로서 javascript 앱을 위한 예측 가능한 상태 컨테이너 를 핵심 가치로 함.
*CQRS : 쉽게 말해 CRUD
redux(react) 의 3가지 원칙
Single source of truth
모든 데이터는 하나의 소스로부터 나와야 한다.
redux 내 모든 전역 상태는 하나의 객체 안에 트리구조로 저장되고 이 객체를 store 라고 한다.
State is read-only
redux 의 state는 action 객체를 dispatch 를 통해서 전달하는 방법 뿐.
state 의 변경방법을 제한하여 안정성과 예측 가능성 향상.
dispatch 를 통해 변화를 중앙화 시킴. 또한 action을 통해 변화의도를 표현.action 은 간단한 형태기 때문에 이를 추적 파악하기 편함.
Changes are mad with pure function
변화는 순수 함수로 제작.
순수함수 : 어떠한 input을 받았을 경우 동일한 output 을 내는것이 보장된 함수.
사이드 이펙트가 없어야함.스코프 외부 값을 사용하면 안됨.store 와 reducer 모두 하나여야 함.
하지면 관심사 분리에 따라 reducer를 분리시켜야 한다.
이를 위해 combinedReducers가 여러가지 reducer를 하나로 합쳐준다.
redux의 구성요소와 데이터흐름
- view
- action
type property를 가지고 있는 js 객체
type 은 필수 그외에는 자유롭게 옵셔널로 선택
일반적으로 payload 로 컨벤션 설정 - reducer
state 이전 값 , action 객체를 인자로 받아서 새로운 state를 리턴하는 순수 함수.
- state 는 오로지 기존 state 와 action을 통해서 계산해야함.
- 가존의 state를 수정해서는 안됨.
- 사이드 이펙트 수행하면 안됨.
- 처리 불가 시 기존의 state 를 반환.
- store
- createStore(combineReducer) 로 생성.
- selectors
특정 값만 getState 하기 위한 함수.
react-redux
react 와 redux를 통합하기 위한 복잡한 과정을 수행하는 라이브러리
react-redux 기능
- provider
- provider의 props 에 store 를 넣어주면 하위 컴포넌트는 모두 store 에 접근가능
- useSelector
- redux store 의 값을 가져옴. redux selector 를 hook 처럼 표현.
- useDispatch
- action 을 store 에 보내기 위한 dispatch 함수를 가져올 수 있는 hook.
상태 관리 자체만 보면 context api 추천 상당히 간단.
middle ware 가 추가되거나 복잡한 과정이 있다면 redux.
redux 는 렌더링 최적화가 좀 있다.
selector 의 값이 바뀔 때만 렌더링이 발생.
context 는 store 의 모든 값이 바뀔 때 렌더링 발생..!
