redux
redux를 사용하지 않을때는 각 컴포넌트끼리의 종속성이 강해서 해당 컴포넌트의 삭제나 업데이트, 새로운 컴포넌트의 추가를 할때 굉장히 번거로운 작업이 필요하지만,
redux를 사용하여 store를 이용한 중앙집중식 데이터 관리를 통해 각 컴포넌트의 독립성이 높아져 각 컴포넌트의 추가 삭제 업데이트에 있어 다른 컴포넌트들과 연관이 되지않아 훨씬 효율적이다.
UI - 각 Color 값을 가지고 있는 버튼이 있는 상황
1) 먼저, createStore() 를 통해 Store 라는 하나의 큰 공간을 만들고, state 라는 객체를 생성한다.
2) callback 함수인 reducer 를 호출하여 state 값을 초기화한다.
3) UI 에서 Color 값의 변경을 요구할 때, Dispatch({ type: 'UPDATE_COLOR', color: 'skyblue' }) 와 같이 action 을 생성하고, 인자값으로 담아 Dispatch를 호출한다.
4) Dispatch는 reducer를 호출하고, reducer는 파라미터로 기존 state값과 action 값을 받는다.
5) reducer 는 action의 type에 따라 실행해야 할 명령문을 정한다. 이 때, pure 함수로 작성을 해야한다.
6) store에 있는 state 값을 대체하는 것이 아니라, 복제하여 새로운 state 값을 만들고, store에 저장한다.
7) store의 state 값이 변경되고 나면, dispatch가 subscribe(render) 를 호출하여 render 안에 새로운 state 값을 전달함으로써 Rerendering이 된다.
