Flux, Virtual Dom 간단 메모

Flux

facebook.github.io/flux/docs/in-depth-overview

In-Depth Overview | Flux

작년에는 이글이 이해가 안되었는데, 어쩌면 올해는 이해되리라는 마음으로 다시 읽어본다. 

 

 

글 요약

• Flux는 Facebook에서 client-side web application을 만들기 위해서 사용하는 구조이다. 
• 이건 리액트의 composable(compose 하는, 그러니까 build 할수있는 그런느낌) 한 view component를 보완하는 느낌인데, 한방향의 데이터 흐름을 통해서 이를 할수 잇게 한다. 
• Flux 구조는 3가지 큰 부분을 가진다
  • Dispatcher
  • Store
  • views(React Components)
  • 추가적으로 action creators라는 dispatcher helper methods(앱내에서 일어날 수 있는 모든 changes를 설명하는것)
    • Support a semantic API that describes all changes that are possible in the application
• 위의 개념은 Model-View-Controller(MVC) 랑 헷갈리면 안되는데, 일단 Flux application에도 Controller가 있다. 그런데 대신 controller-views이다.
• 모든 데이터는 dispatcher로 흘러가는데, 이때 dispatcher는 central hub로 생각하면 된다. 
• 액션은 dispatcher에 제공되는데, 이때 action creator method를 이용해서 제공된다. 
• dispatcher는 callback함수가 실행되도록 하는데, 이건 store가 dispatcher랑 callback 같이 등록을 한다. 

 

 

www.youtube.com/watch?v=RbgU-zvbX1o

 

 

 

Virtual Dom

reactjs.org/docs/faq-internals.html

Virtual DOM and Internals – React

 

 

meetup.toast.com/posts/110#:~:text=React%EC%9D%98%20Reconciliation%EC%9D%80%20%EC%96%B4%EB%96%A4,%EC%97%85%EB%8D%B0%EC%9D%B4%ED%8A%B8%ED%95%98%EB%8A%94%20%EA%B2%83%EC%9D%84%20%EC%9D%98%EB%AF%B8%ED%95%9C%EB%8B%A4.&text=render()%20%EC%97%90%EC%84%9C%20%EC%83%88%EB%A1%9C%EC%9A%B4%20%EC%97%98%EB%A6%AC%EB%A8%BC%ED%8A%B8,%EC%A0%90%EC%9D%84%20%EC%B0%BE%EC%95%84%20%EC%97%85%EB%8D%B0%EC%9D%B4%ED%8A%B8%ED%95%9C%EB%8B%A4.

React 렌더링과 성능 알아보기 : NHN Cloud Meetup

React의 Reconciliation은 어떤 변경에 대한 전/후 엘리먼트 트리를 비교(Diff)하여 갱신이 필요한 부분만을 찾아 업데이트하는 것을 의미한다. React는 렌더링에서 Reconciliation 작업을 선행하기 때문에 플랫폼 UI에 대한 제어를 최소화 시키는 것이다(보통 UI 제어 비용은 비싸기 때문이다). 즉 브라우저에서 DOM에 대한 제어를 최소화시키는 것이다.