Flux vs MVC: Best Explanation 번역

김대연·2020년 4월 8일
1

Translated Docs

목록 보기
2/2

이 글은 해당 포스트를 번역한 것으로 의역 및 오역이 많습니다!
잘못되거나 더 나은 수정이 있으시다면 댓글로 남겨주세요!


Flux vs MVC: Best Explanation

Flux 아키텍쳐는 React.js 의 중추입니다. Flux 는 MVC 와 여러 디자인 패턴의 대체인데, 페이스북은 Flux 패턴이 확장성과 가독성 두 측면에서 훨씬 뛰어나다고 주장합니다. 만약 React 나 Angular 2 를 사용해봤다면, 당신은 앱을 이미 Flux 아키텍쳐로 구성해보았을 가능성이 높습니다.

Flux 패턴이 MVC 패턴보다 더 나은지에 대해서는 아직 논쟁의 여지가 있습니다. 어느 것이 더 나은가를 따지기보다, Flux 와 MVC 패턴의 주요 차이점을 비교해보도록 하겠습니다.

Unidirectional data flow - 단방향 데이터 플로우

Angular 는 양방향 데이터 바인딩으로 잘 알려져있습니다. 유저가 view 단의 input field 를 업데이트할 때, view 단은 data model 을 즉시 업데이트합니다. 마찬가지로, model 단에서 (controller 를 통해) 업데이트를 전달받으면 해당 변화를 표현계층(presentation layer) 에도 전달합니다. 이렇게 view 와 model 단은 지속적으로 동기화되어 양방향 데이터 플로우를 이루게 됩니다.

MVC 와 다르게, Flux 패턴은 단방향 데이터 플로우를 이루고 있습니다. dispatcher(사전적 의미로 관리자/감시자/발송자 의 의미가 있습니다. 도움이 될까 추가했습니다.) 가 view 단에서 user actions 을 받고 stores 를 업데이트하게 됩니다. 이 store 들은 MVC 의 model 단과 비슷하지만, 여러 데이터 객체들을 저장할 수 있습니다. dispatcher 에서 user action 을 전달받게 되면, 각 스토어들은 user action 에 의해 영향받은 view 단을 업데이트하게 됩니다. 어플리케이션 상태(application state) 가 store 에서만 관리된다는 점을 유의해야 합니다. 이러한 특성은 앱의 각 파트들의 엄격한 독립성을 유지시킵니다. 즉, view 단에서 app 의 존재하는 state 에 직접적으로 변화를 줄 수 없음을 의미합니다. 대신, view 단에서는 새로운 state 를 생성하는 actionable 한 item 을 만듭니다. 이 새로운 state 는 필요시에 기존의 state 를 대체하게 됩니다.

So What? - 그래서?

왜 단방향 데이터 플로우가 더 낫다는 것일까요? 양방향 데이터 바인딩은 앱의 state 와 표현계층을 밀접하게 연결시켜놓았는데, 이 때 앱의 복잡도가 커질수록 더 제어하기 힘들어지게 됩니다. 한 controller 가 여러 model 과 여러 view 와 연결되어 있을 수도 있습니다. Flux 패턴의 지지자들은 이러한 특성이 앱에서 'cascading events - 연쇄적인 이벤트 작용' 과 'nested updates - 중첩된 업데이트들' 을 일으키기 쉽게하는 경향이 있다고 주장합니다. 이런 양방향 데이터 플로우에선, view 단이 model 단을 업데이트할 때 다른 model 단에서도 또 다른 view 단을 업데이트하도록 연쇄적인 트리거가 일어날 수도 있습니다. 그렇게 되면 겉잡을 수 없는 혼란이 일어나게 됩니다.

양방향 데이터 플로우는 앱의 복잡도가 커질수록 자칫 혼란스러워질 가능성이 있다.

이러한 점은 user action 으로 인한 변화를 한 방향으로만 전달하는 단방향 데이터 플로우 장점을 부각시켜줍니다. 단방향 데이터 플로우는 앱의 사이즈가 커질수록, 특히 여러 model 단과 view 단을 가지고 있을 때 유용해집니다. 개발자들은 새로운 기능이 다른 컴포넌트들에 어떤 영향을 미칠지 고민하지 않아도 됩니다. 대신 그들은 이미 존재하는 user actions / 이벤트 들에 반응하는 독립적인 기능들을 개발하는 것에만 집중하면 됩니다.

Conclusion - 결론

Flux 아키텍쳐는 MVC 의 대체로 입증되어왔습니다. MVC 의 지지자들은 Flux 패턴이 '바퀴를 재발명'한 것에 지나지 않다고 주장하지만, Flux 패턴은 데이터와 표현 계층 사이의 복잡성을 확연히 감소시켰습니다. Flux 패턴은 React.js 라이브러리의 필수적인 요소일 뿐만 아니라 Angular 2 에도 적용가능합니다.

0개의 댓글