MVC 패턴과 Flux 패턴에 대한 고찰

MVC 패턴

이 패턴은 node express 서버개발 경험이 있다면, 반드시 겪어봤을 패턴이다.

Model - View - Controller

Model은 로직, 실질적인 처리를 담당하고,

Controller는 어떻게 핸들링할지를 정의하고

View는 사용자와 상호작용하며 Controller를 호출하는 부분이다.

node express를 개발할 때는 이렇게 1대1 매칭을 시키지만, react 자체에서도 MVC패턴을 고사할 수 있다.
그냥 패턴일 뿐이지, 어느 한곳에 국한된 방식이 아니다.

express에서는, 즉 서버에서는 이 패턴이 유용하다. 왜냐하면 Controller에 의해서 Model에 접근할 수 있으니, 어떤 문제가 발생했다면, 해당 컨트롤러를 찾아가면된다. 더 이상 다른 곳을 볼 필요가 없다(물론 무조건 그런건 아니겠지만).

 

하지만 만약에 React에서 MVC 패턴을 구현한다고 생각해보면 조금다르다.

React에서 MVC 패턴을 묘사하는 대표적인 그림이다.

단순히 양방향 흐름때문에 사이드이펙트가 발생할 수 있다는점,의존성이 높아진다는점,  예측불가능하다는점 .. 이 조금 이해가안됬다.

2시간동안 많은 글들을 찾아봤는데, 거의동일한 얘기만하였고, 그 사이에서 이해하려고 노력했다.(맞는지는모르겠다)

 

나는 state와 그 state를 변경하는 로직이 어디있냐에 따라서 구분할 수 있다고 생각했다.

예를들어서 한 컴포넌트 내에서 state를 어떤 컴포넌트에서 생성하고 그 state를 변경하는 함수가 여러 컴포넌트로 props로 전달되었다면 Flux는 아니라고봐야된다. 왜냐하면 여러 컴포넌트에서 state를 변경하는 비즈니스 로직을 가지고있기 때문이다.

 

Flux패턴은 state와 state를 변경하는 로직이 한곳에 있을 때라고 정의했다.

redux의 예시로들면 store에 state가 저장되어있고, store에 저장된 값을 변경하기 위해서는 반드시 reducer를 통해서 수정이가능하다.

어떤 컴포넌트에서든지 store의 값을 변경하기 위해서는 dispatcher를 통해서 변경해야되기 때문에, 상태의 변경이 하나의 흐름을 가진다고 볼 수 있다.

이 그림까지 같이본다면, state를 업데이트하는 로직이 각 view마다 있을것인지, 아니면 하나의 dispatcher를 통해서 업데이트될 것인지에 따라서 패턴이 나누어진다고 생각 할 수 있을것 같다.