AngularJS & ReactJS 비교

by peter yun

목차

● AngularJS & ReactJS 개발접근법● $scope & Prop/State/Ref● AngularJS Directive 개발● ReactJS Component 개발

AngularJS & ReactJS 개발접근법● AngularJS Develop Methodology

o SPA : frontend rendering + partial view(routing)o MVC Patterno Two way data binding : $scopeo Directive : already defined Directive + user defined Directive -> when need and makeo Grunt/Gulp Build tool + ES3 (ES5)o Not necessary enough JS Skill

● ReactJS Develop Methodologyo SPA : frontend rendering + partial view(routing) ?o Flux Patterno One way data binding : Prop & Stateo JSX : already defined JSX + user defined JSX -> always make and compositiono Grunt/Gulp + Modulization(Browserify or Webpack) + ES6 (use Babel)o Necessary enough JS Skill ex) you need to know ‘this’ or Fn.bind(this)

AngularJS & ReactJS 개발접근법● AngularJS Develop Pros ● ReactJS Develop Pros

o JSX -> Virtual DOMo One Way Data Bindingo Flux Patterno Testbility ? : 찾아봐야함

AngularJS & ReactJS 개발접근법● AngularJS Develop Structure ● ReactJS Develop Structure

o Declarative Component using JSX easily

o Composition with each of componentso Only View into logico ???

$scope & Prop/State/RefAngularJS : scope 는 Prop + State 합쳐놓은격 (Ref 는 jQuery Node 접근용 )

Parent Component

Child Component

Props Immutable

State mutable

AngularJS Directive 개발AngularJS : scope 연결형태

AngularJS Directive 개발AngularJS : 컴포넌트간연결고리인 $scope

ReactJS Component 개발ReactJS Component Lifecycle

- https://facebook.github.io/react/docs/component-specs.html

Cheat Sheet - http://ricostacruz.com/cheatsheets/react.html

ReactJS Component Search- http://www.reactjsx.com/

ReactJS + D3.js 차팅- http://ahmadchatha.com/writings/article1.html