- 컴포넌트 기반의 프레임워크 구조를 이해하기 좋은 예
- Facebook이 만들고 사용한다.
- JUST THE UI(컴포넌트 기반): MVC 모델에서 View를 컴포넌트로 만들어 User-interaction에 좀 더 집중하기 위한 라이브러리
- VIRTUAL DOM: 지속적으로 데이터 변화를 감지하여 View에 반영
- 실제 DOM에 접근하여 조작하는 대신에 이를 추상화 시킨 JavaScript 객체를 구성하여 사용
- 데이터가 변경되면 UI를 Virtual DOM에 렌더링 한 후 이전 Virtual DOM과 비교하여 바뀐 부분만 실제 DOM에 적용
- DATA FLOW(단방향): 모든 데이터모델을 단일 루트에서 시작하는 계층 구조로 사용
- render: 하나의 컴포넌트만을 return한다.(복수 컴포넌트 return 금지)
// NO
render() {
return (
<div>title</div>
<div>contents</div>
);
}
// OK
render() {
return (
<div>
<div>title</div>
<div>contents</div>
</div>
);
}
- 컴포넌트 간의 상호작용 :
props
를 통해 컴포넌트 간 I/F한다. - 동적으로 갱신 : User-Interaction을 통해 값이 동적으로 변화하는 경우
state
사용(this.setState
)
- MVC 패턴을 적용했을 때 프로젝트 규모가 기하 급수적으로 커지는 단점을 보완
- MVC 단점을 보완해줄 수 있는 Flux 패턴
- 결국 Redux는 Flux 구조를 좀 더 쉽고 정돈된 형태로 쓸 수 있게 해주는 라이브러리
- JavaScript Application에서 data-state 와 UI-state를 관리해주는 도구
- 설치
$ npm install --save redux
or
$ yarn add redux react-redux
/*
react-redux: redux를 컴포넌트 상에서 더 간편하게 사용 할 수 있게 해 주는 라이브러리. 컴포넌트에서 store 를 props 으로 받아오거나, subscribe 를 직접 할 필요가 없음
*/
Action
정의: 일어날 상황을 정의 하여 상태를 변화시키는 역할Reducer
정의: 액션이 상태를 어떻게 변경할지 정의
- Action의 결과가 Reducer로 분배됨
- Redux가 새로운 state를 계산하는데 쓰는 함수
Store
를 만들고 React와 연계: 앱의 상태를 정의
- store를 만듭니다.
- redux.Provier로 전체 앱을 한번 감싸줍니다.
- state를 props로 받기 위해 의 정의를 새로 합니다. 변환 함수를 작성 한 뒤 redux.connect를 이용합니다. export default connect(f)(App)꼴로 사용합니다.
- Key Point
State is read-only : state는 직접변경할 수 없다. 대신 action을 dispatch하여 state를 변경한다. 해당 로직은 reducer에 있다.