React.js + Redux

Redux 

* 장점.

- UI / Data 가 분리되어 프로젝트를 이해하기가 쉬워지며, component의 재사용률도 높여 줌.

* container로 만들어야 할 것.

- Page

- List

- Header

- Sidebar

- 내부의 컴포넌트 때문에 props가 여러 컴포넌트를 거쳐야 하는 경우.

* Action

-Action은 하나의 객체. 모든 액션 객체는 type이라는 값을 지니고 있어야한다.

ex) type: "SET_COLOR",

    color: "black"

여기서 type은 액션의 이름과도 같은 존재.

Type name은 대문자로 써야함. 

* Reducer

- Action의 type에 따라 변화를 일으키는 함수. 초기상태가 정의되어야함.

* Store

Redux에서 가장 핵심적인 인스턴스.이 안에 현재 상태를 내장. 

구독(subscribe)중인 함수들의 상태가 update 될 때마다 다시 실행되게 해줌.

ex) import { createStore } from 'redux'

    import reducers from './reducers';

    const store = createStore(reducers);

* Provider

- React App 에 store를 손쉽게 연동 할 수 있도록 도와주는 component입니다.

Directory 구성

node_modules (dir)

package.json

public (dir)

src (dir)

- actions: Action Type. 액션 생성자 파일이 저장됨.

- components: Only View 담당. presentational component 들이 저장됨. DOM element, style을 갖고있음. 

                         only props로만 데이터 가져올수 있음. ( UI )

- containers: store에 접근이 닿는 container component 들이 저장됨. ( Redux에 직접적으로 접근, Data. )

- reducers: Store의 기본 상태와, 상태의 업데이트를 담당하는 reducer 파일들이 저장됨.

- utils: 일부 component들에서 공용되는 파일이 저장됨.

yarn.lock