정의 : 애플리케이션 개발시 가장 많이 사용되는 디자인패턴으로, 컨트롤러(Controller)는 모델(Model)의 데이터를 조회하거나 업데이트하는 역할을 하며, 모델(Model)의 변화는 뷰(View)에 반영한다. 또한, 사용자는 뷰를 통해 데이터를 입력하는데 사용자의 입력은 모델에 영향을 준다.
문제점 : 페이스북과 같은 대규모 애플리케이션에서는 Model이나 Model과 관련한 View가 대량으로 시스템에 추가되면 복잡도가 폭발적으로 증가하는데, 이 같은 의존성과 순차적 업데이트는 종종 데이터의 흐름을 꼬이게 하여 예기치 못한 결과를 불러일으킨다.
Flux 패턴
Flux
정의 : MVC 패턴의 문제를 해결하기 위해 고안된 아키텍쳐
단방향 데이터 흐름(unidirectional data flow) : Flux의 가장 큰 특징으로, 데이터의 흐름은 언제나 디스패처(Dispatcher)에서 스토어(Store)로, 스토어에서 뷰(View)로, 뷰에서 액션(Action)으로 다시 액션에서 디스패처로 흐른다.
구성요소
dispatcher : Flux 애플리케이션의 모든 데이터 흐름을 관리하는 허브 역할.
action : 액션생성자에의해 생성되고 상태 업데이트 할 때 참고해야 할 값을 가진 객체
store : 애플리케이션의 상태를 저장및 action객체를 수신하여 새로운 상태를 만들어서 반환
Redux
redux life cycle
정의 : React에서 State를 좀더 효율적으로 관리하는데 사용하는 flux 패턴의 상태관리 라이브러리
기존에는 부모에서 자식의 자식의 자식까지 상태가 흘렀었는데, 리덕스를 사용하면 스토어를 사용하여 상태를 컴포넌트 구조의 바깥에 두어스토어를 중간자로 두고 상태를 업데이트 하거나, 새로운 상태를 전달받음. 따라서, 여러 컴포넌트를 거쳐서 받아올 필요 없이(종속성 제거) 아무리 깊숙한 컴포넌트에 있다 하더라도 직속 부모에게서 받아오는 것 처럼 원하는 상태값을 골라서 props 를 편리하게 받아올 수 있음.
리덕스 구조
action : 상태변화를 일으킬 때 참조하는 객체
action creator : 액션객체를 생성하는 함수
reducer : 현재상태와 액션객체를 파라미터로 받아 새로운 상태를 반환하는 함수
store : 애플리케이션의 상태, 리듀서, 몇가지 함수들을 내장
dispatch : 스토어에 내장된 함수로 액션객체를 파라미터로 받아 액션객체를 스토어에게 전달한다. 이후, 스토어는 리듀서 함수를 실행.
subscribe : 스토어의 내장 함수. 파라미터로 리스너 함수를 전달하여 subscribe함수를 호출하면, 액션이 디스패치되어 상태가 업데이트될 때마다 리스너함수를 실행.
리덕스 라이프 사이클
event 발생 -> action creator 호출
action creator는 action(object) 생성
생성된 action은 모든 middleware를 거쳐 모든 reducer들에게 전달
reducer는 action type에 따른 state반환
state는 app의 state에 덮어쓰이고 모든 container들에게 전달
컴포넌트 리렌더링
상태업데이트 예시
1. 스토어설정2. 컴포넌트의 스토어 subscribe3. dispatch4. 상태 업데이트
5. 리렌더링
리덕스 규칙
단일 스토어 : 하나의 애플리케이션에는 하나의 스토어만 존재
읽기 전용 : 리덕스의 상태는 항상 읽기 전용
리듀서는 의존성 없는 순수함수 : 리듀서 함수는 인전상태와 액션 객체를 파라미터로 받고 파라미터 외의 값에는 의존하지 않는 순수함수이다.
