[React] React는 MVC 패턴일까 Flux 패턴일까?

 

MVC 패턴에 대해 공부하다 문득 드는 생각이... 

 

React는 그럼 어떤 패턴이지...??

 

정답은,

React는 MVC가 될 수도 있고 Flux가 될 수도 있다.

다시 한번 짚고 넘어가야 할 부분은 React는 프레임워크가 아닌 라이브러리라는 점이다. 

 

그리고 React는 오로지 View에 집중한 라이브러리다. 즉 나머지 부분을 어떻게 개발자가 만드느냐에 따라 MVC가 될 수도 있고 Flux가 될 수도 있다는 것이다. 

 

하지만 React의 경우 Redux를 사용해 대부분 Flux 패턴을 따라 작성된다.

(하지만 주의해야 할 점은 Redux는 Flux 패턴을 유사하게 따라 하는 라이브러리이지 완벽하게 Flux 패턴을 구현하지 않았다. 실제로 Redux에는 Dispatcher에 대한 개념이 없다.)

 

 Flux의 개념도는 위와 같은데, 각자의 역할은 아래와 같다. 

 

• Action: 일종의 주문서라고 생각하면 된다. 타입을 지정하고 그 안의 데이터를 포함하고 있다.
• Dispatcher: Action 객체 정보를 받아 어떤 작업을 진행할지 결정하는 구간이다. 액션에서 지정한 타입대로 미리 작성해둔 명령을 수행한다.
• Model(Store): 데이터와 상태를 저장하고 있는 곳으로 데이터에 변형이 이루어 지면 View에 반영된다. 
• View: React가 담당하는 부분으로 화면 디스플레이를 다룬다.