Flux?
flux 패턴은 mvc의 복잡함때문에 나온 패턴이다.
mvc패턴은 view와 model사이에 양방향으로 data가 흐르기 때문에 한쪽 view에서 data 변경을 하면 다른쪽view에서도 data가 변경되고 또 그에따른 data가 변경에 다른 view가 영향을 받고...이런식으로 꼬일수가 있다고 한다. 특히 app의 규모가 커지면 이런일이 발생하게 된다고 한다. 사실 나는 이런 경험이 없어서 그냥 그런가보다 한다.
양방향으로 data가 왔다 갔다 해서 그런것이라고 한다.
그렇다면 양방향이 아닌 단방향으로 data를 처리하면 문제가 해결되지 않을까? 바로 flux패턴이 단방향으로 data를 처리하는 패턴이다.
fluxus-fluxion-fluent-flux-flow : 모두 흐름 이라는 뜻이다 (data를 한방향으로!)
flux패턴의 아키텍처다.
한방향으로 흐른다.
Action
action은 data의 시작이라고 보면 될것같다. action은 data를 가지고있다고 생각하면 된다. 물론 data를 직접 가지고 있지 않을 수도 있다. 말 그대로 action(행동, type)만 취할수도 있다.
Dispatcher
dispatcher는 action을 받아서 store로 넘겨준다. dispatcher에는 callback을 등록할수가 있는데, 이 callback에서 data의 여러 처리가 일어난다.
Store
store는 dispatcher에 callback에서 처리된 data를 저장하는곳이다. store 내부의 data가 변경되면 이 변경을 감지해서 view에 해당 data를 알려준다.
시작은 action이라는것을 잊지말자.
Redux
redux는 flux패턴을 구현한 라이브러리라고 생각하면 된다. react뿐만 아니라 다른곳에서(심지어는 vanillaJS에서도) 사용할수가 있다.
기본적인 원리는 flux패턴과 거의 비슷하다고 볼수 있겠다.
단지 data 처리를 reducer라는 놈이 할 뿐이다. flux패턴에서 언급한 dispatch에 등록된 callback 정도로 이해하면 되겠다.
action -> dispatch -> reducer -> store , store변경시 view에 data 변경됬다고 알려줌.
Code
const someAddAction = {type: "add", data: 1 }
const someMinusAction = {type: "minus", data: 1 }
...
dispatch(someAddAction);
dispatch(someAddAction);
dispatch(someMinusAction);
...
const reducer = (state = 0, action) => {
switch(action.type){
case "add":
return state + action.data;
case "minus":
return state - action.data;
}
}
...
const initialState = 0
const store = createStore(reducer, initialState);
...
store.getState() // 스토어내부 data의 현재 상태가 나옴
...
store.subscribe(() => console.log(store.getState()))
// subscribe메서드는 스토어 내부의 state가 변경되었을때 실행됩니다.
위에서 부터 대략적으로 살펴보게 되면 어떤 action이 있고,
그 action을 dispatch가 인자로 받아서 reducer에게 전달한다.
reducer는 반드시 새로운 객체를 반환해야 한다. 즉, 기존 data에 직접적인 변경을 가해서는 안된다!
(이 부분은 따로 포스팅을 해야겠다.)
전달받은 reducer는 action의 종류에 따라 등록해놓은 로직을 실행하고 마지막에 data를 리턴한다.
리턴한 data는 store내부에서 업데이트가 된다.
해당 store를 subscribe하게 되면 state가 변경되었을 때마다 callback을 실행할수가 있는데, 이 부분에서 view에서 data를 보여주는 로직을 작성해주면 될듯하다.
내가 생각하는 redux의 가장 중요한 점은 subscribe인것 같다.
한곳의 data저장소(store)에서 여러 view들이 subscribe만 해주면 해당 data가 변경이 되었을 때 변경된 정보만 보여주기 때문이다. 아마 이런 부분에서 mvc패턴의 양방향성에 대한 단점을 없에버린 패턴이 아닌가 싶다.
다음 포스팅은 React에서 어떤 방식으로 action을 만들고, 만들어진 action을 dispatch하고, subscribe하는지 포스팅 해야겠다.
'Frontend > REACT.JS' 카테고리의 다른 글
| [ReactJS] state (0) | 2020.03.03 |
|---|---|
| [ReactJS] JSX 와 Props (0) | 2020.03.03 |
