React.js에 대해 배워보자
160824/ 페이스북이 만든. 구글의 Angular.js와 양대산맥인.
페이스북에서 만들어서, 페이스북에서 밀고 있는 React.js
계속 배워보고 싶었는데 드디어 코드카데미에 올라왔다!
프론트엔드, MVC 모델에서 V(View)를 위한 라이브러리로
가장 큰 장점은 Virtual DOM 기술을 사용해서 빠르게 페이지의 변경이 가능하다는 것.
페이스북이 열심히 개발해서 밀고 있다는 점도 장점일 수 있겠다.
리액트는 출시할 시점에도 관심을 끌었으나, 특히나 리액트 네이티브를 내놓으면서 폭발적인 관심을 모았다.
리액트에 대해 관심이 있다면 읽어 보길 권하는 기사.
http://www.bloter.net/archives/233564
작년 7월에 나온 기사인데, 현재는 안드로이드도 리액트 네이티브로 개발이 가능하다.
리액트 네이티브와 네이티브 애플리케이션의 비교가 궁금할 때 읽어보면 좋은 칼럼.
https://realm.io/kr/news/react-native-android-pros-cons/
직접적인 개발은 해보진 않았지만, 내 생각에도 아무래도 리액트 네이티브도 한계를 가질 것이라 생각하는데 잘 짚어주셨다.
글 밑에 있는 슬라이드에 쓰여있듯이 '써드파티 SDK가 필요 없고, 빠른 개발이 중요하거나, 프로토 타이핑할 때, 간단한 로직의 UI 위주의 앱'에 리액트 네이티브가 좋겠다고 글쓴이는 얘기하고 있지만,
페이스북이나 인스타그램이 리액트 네이티브로 짜였다고 하니 괜찮을 듯싶기도 하고... 직접 개발해보면서 겪어봐야 알 듯싶다. 리액트 네이티브로 애플리케이션을 짜실 분은 여러 기사를 찾아보시길.
iOS, 안드로이드 모두 개발하기에는 필요인력도 커지고 많은 시간과 기술을 요할 테니 작은 팀에서는 리액트 네이티브가 시작하기 좋은 방안일 듯. (이후에 규모가 커졌을 때 네이티브 애플리케이션으로 이동하던가.. 하는 방식으로)
https://www.codecademy.com/articles/react-virtual-dom
코드카데미 수업을 듣다 보면 읽어보라고 권하는 리액트의 Virtual DOM
간단히 말하면 DOM의 일부만 변경하면 되는 경우에도 기존 DOM Manipulation은 DOM 전체를 update 하므로 느린데, Virtual DOM은 비교 과정을 통해 필요한 부분만 update 한다. 고로 빠르다!
위 글에서 걸려있는 링크. Virtual DOM에 대해서 더 알고 싶으면 읽어보면 좋다.
http://reactkungfu.com/2015/10/the-difference-between-virtual-dom-and-dom/
The Virtual DOM is an abstraction of the HTML DOM. It is lightweight and detached from the browser-specific implementation details. Since the DOM itself was already an abstraction, the virtual DOM is, in fact, an abstraction of an abstraction.
Virtual DOM은 HTML DOM의 abstraction(추상)이다. Virtual DOM은 가볍고, 브라우저 종속적이지 않다. DOM 그 자체가 이미 abstraction이므로, Virtual DOM은 abstraction의 abstraction이다.
참고로 HTML DOM이 궁금하다면 아래 링크를 확인해보면 좋다.
http://codingnuri.com/javascript-tutorial/html-dom-document-object-model-overview.html
DOM(Document Object Model)은 HTML 문서의 모든 요소에 접근하는 방법을 정의한 API다.
HTML 문서는 중첩된 태그로 구성된 계층적인 구조를 띠는데, 이는 DOM에서 객체 트리로 표현된다. DOM 트리에는 HTML 태그나 엘리먼트를 나타내는 노드가 담긴다.
