This document compares AngularJS and ReactJS development approaches. It discusses differences in data binding, component structure, and lifecycles. AngularJS uses two-way data binding via $scope while ReactJS uses one-way data binding via props and state. AngularJS components are connected via $scope, while ReactJS uses props and composition. The document provides links to ReactJS documentation on component lifecycles and integrations with D3.js.

1. AngularJS &
ReactJS 비교
by peter yun

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

3. AngularJS & ReactJS 개발 접근법
● AngularJS Develop Methodology
o SPA : frontend rendering + partial view(routing)
o MVC Pattern
o Two way data binding : $scope
o Directive : already defined Directive + user defined Directive -> when need and make
o Grunt/Gulp Build tool + ES3 (ES5)
o Not necessary enough JS Skill
● ReactJS Develop Methodology
o SPA : frontend rendering + partial view(routing) ?
o Flux Pattern
o One way data binding : Prop & State
o JSX : already defined JSX + user defined JSX -> always make and composition
o Grunt/Gulp + Modulization(Browserify or Webpack) + ES6 (use Babel)
o Necessary enough JS Skill ex) you need to know ‘this’ or Fn.bind(this)

4. AngularJS & ReactJS 개발 접근법
● AngularJS Develop Pros ● ReactJS Develop Pros
o JSX -> Virtual DOM
o One Way Data Binding
o Flux Pattern
o Testbility ? : 찾아 봐야함

5. AngularJS & ReactJS 개발 접근법
● AngularJS Develop Structure ● ReactJS Develop Structure
o Declarative Component using JSX
easily
o Composition with each of components
o Only View into logic
o ???

6. $scope & Prop/State/Ref
AngularJS : scope 는 Prop + State 합쳐 놓은 격 (Ref는 jQuery Node 접근용)
Parent Component
Child Component
Props
Immutable
State
mutable

7. AngularJS Directive 개발
AngularJS : scope 연결 형태

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

9. 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