http://mobicon.tistory.com/461
ReactJS(리액트)는 자바스크립트로 UI 컴포넌트를 만드는 프레임워크이다. 만들어진 컴포넌트를 사용할 수도 있고, 수정할 수 있고, 조합할 수 있으며 자신만의 UI 컴포넌트를 직접 만들 수 있다. 즉 프론트앤드 UI의 화면을 컴포넌트 조합으로 만들고, 화면의 데이터를 앵귤러처럼 자동 업데이트 해주지만 앵귤러와 틀리게 단방향 데이터 바인딩이다. 리액트는 앵귤러(AngularJS)의 지시자(Directive)와 비교되지만 훨씬 간단하고 성능 또한 월등하다. 이제 배우고 익혀 사용할 때가 되었다.
개념잡기
- 쿼라(Quora)에서 이야기하는 장/단점을 살펴보자.
장점
+ Virtual DOM 을 JS로 구현해서 UI 컴포넌트의 속도가 엄청 빠르다.
+ Component의 재사용과 복잡한 UI 컴포넌트 조합이 가능하다.
+ Uni-direction(단방향) 방식하에 데이터가 변경되면 관련된 모든 UI 컴포넌트가 변경된다.
+ commonJS / AMD 패턴과 잘 조합되고, 크롬 익스텐션을 통해 디버깅할 수 있다.
단점
+ 초보자들에겐 역시 러닝 커브가 존재한다.
+ 다른 프레임워크가 동작하기 위해선 부가적인 작업들이 필요하다.
+ 앵귤러처럼 router, model등 Frontend Full Framework을 제공하지 않아서 꼭 다른 프레임워크와의 조합이 필요하다.
- React Starting 동영상으로 기본개념을 잡아 보자.
- 프리젠테이션으로 정리해 보자. 재미있게 진행되니 WTF는 날리지 말자.
내용중에 앵귤러를 사용하고 있는 개발자라면 앵귤러의 지사자에서 scope: { createXXX: '&' } 방식으로 자식의 부모의 함수를 호출 할 수 있다
그리고 자식, 부모간에 scope 객체의 상속을 통해 scope 속성을 접근할 수 있다는 것도 알 수 있다.
+ Flux 소개 아래 영상을 보면 react가 Virtual DOM을 통해 더 낳은 성능과 단순성을 통한 버그 가능성 제거를 이룰 수 있는지 가늠할 수 있다
* Flux 사이트
React와 Flux 아키텍쳐를 통해 모던 웹 애플리케이션에서 기존 보다 성능 우위를 가지면서 대용량 데이터를 Data Visualization 할 수 있는 길을 볼 수 있다. 플럭스 아키텍쳐를 자신의 백앤드시스템에 어떻게 구성하느냐가 중요하겠다. Minko.io의 3D 렌더링 서비스 업체는 Flux와 React를 기존의 최신 기술로 어떻게 구현했는지 프리젠테이션을 통해 볼 수 있다. 당연히 D3.js를 통해 데이터 Data Visualization 하는 방법도 있다.
- Flux Architecture 구성으로 Meteor, Flux, React, Minko 3D 렌더링 엔진과 결합해서 Data Visualization 하기
