React 기초 핵심정리 - 데이터 다루기

React에서 추천하는 데이터를 다루는 방법

redux의 시작은 view를 다루는 곳에다가 데이터까지 다루는 코드가 있는 것이 싫어서이다.

뷰는 결국, 이벤트나 데이터의 변경에 의해서 변경이 일어남.

자연스럽게 데이터에 의해서 React기반의 View부분이 다시 렌더링 될 수 있는 어떠한 장치가 있으면 좋겠다.

Flux는 architecture 컨셉을 제공하는 역할을 하고, 

실제 다양한 구현체가 등장했는데 

대표적인 구현체가 Redux이다.

(http://redux.js.org/)

Redux의 원리

데이터와 뷰간 직접호출을 할수도 있음.(그러나 데이터와 뷰 간의 결합도가 높다)

그림. 데이터와 뷰간 결합도가 높음

데이터와 뷰 간에 직접적인 호출을 하지 않고 이벤트가 일어났음을 알려주는 로직을 사용할 수 있음.(데이터와 뷰간의 결합도 낮음) 데이터의 실제 변경값은 reducer가 새로운 object를 만들어서 전달함.

그림. 데이터와 뷰간 결합도가 낮음

store안에 dispatch메서드를 활용하여 사용, store는 보이지 않는다. store.js 그런거 없다. reducer가 알아서 모아줌!! 오히려 store가 제공하는 public method(dispatch, subscribe 등등) 을 사용한다.

그림. store의 메서드 활용

action

함수다. 무었을 해야할지를 객체형태로 반환함

reducer

함수다. 데이터(state)에 변화를 실행시킨 후 변경된 데이터를 반환

store

action의 결과를 reducer로 전달함.(dispatch method를 통해서)

dispatch, subscribe, getstate와 같은 public method가 있음.

Redux를 사용할 때 개발자가 주로 해야할 것들?

• action 정의 및 구현
• reducer 구현
• dispatch로 전달할 액션들 구현
• store로부터 데이터를 받을 수 있게 구현