ReactJS(리액트)는 자바스크립트로 UI 컴포넌트를 만드는 프레임워크이다. 만들어진 컴포넌트를 사용할 수도 있고, 수정할 수 있고, 조합할 수 있으며 자신만의 UI 컴포넌트를 직접 만들 수 있다. 즉 프론트앤드 UI의 화면을 컴포넌트 조합으로 만들고, 화면의 데이터를 앵귤러처럼 자동 업데이트 해주지만 앵귤러와 틀리게 단방향 데이터 바인딩이다. 리액트는 앵귤러(AngularJS)의 지시자(Directive)와 비교되지만 훨씬 간단하고 성능 또한 월등하다. 이제 배우고 익혀 사용할 때가 되었다.
개념잡기
- 쿼라(Quora)에서 이야기하는 장/단점을 살펴보자.
장점
+ Virtual DOM 을 JS로 구현해서 UI 컴포넌트의 속도가 엄청 빠르다.
+ Component의 재사용과 복잡한 UI 컴포넌트 조합이 가능하다.
+ Uni-direction(단방향) 방식하에 데이터가 변경되면 관련된 모든 UI 컴포넌트가 변경된다.
+ commonJS / AMD 패턴과 잘 조합되고, 크롬 익스텐션을 통해 디버깅할 수 있다.
단점
+ 초보자들에겐 역시 러닝 커브가 존재한다.
+ 다른 프레임워크가 동작하기 위해선 부가적인 작업들이 필요하다.
+ 앵귤러처럼 router, model등 Frontend Full Framework을 제공하지 않아서 꼭 다른 프레임워크와의 조합이 필요하다.
- 처음에는 무조건 공식 홈페이지의 가이드를 보자.
+ Quick Start
+ Advanced Guides
+ Reference
- 프리젠테이션으로 정리해 보자. 재미있게 진행되니 WTF는 날리지 말자.
내용중에 앵귤러를 사용하고 있는 개발자라면 앵귤러의 지사자에서 scope: { createXXX: '&' } 방식으로 자식의 부모의 함수를 호출 할 수 있다
그리고 자식, 부모간에 scope 객체의 상속을 통해 scope 속성을 접근할 수 있다는 것도 알 수 있다.
+ Flux 소개 아래 영상을 보면 react가 Virtual DOM을 통해 더 낳은 성능과 단순성을 통한 버그 가능성 제거를 이룰 수 있는지 가늠할 수 있다
* Flux 사이트
'React' 카테고리의 다른 글
| [React] 다시 시작하기 (0) | 2018.09.14 |
|---|---|
| [React] Semantic-UI를 React 컴포넌트로 만들기 - 1 (0) | 2015.08.23 |
| [React] CSS Framework 선정하기 (0) | 2015.08.15 |
| [Flux] Flux 배우는 방법 (0) | 2015.07.04 |
| [React] AngularJS와 ReactJS 비교 (0) | 2015.07.01 |
