[React] 배우는 방법

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는 날리지 말자.

     

     React JS and why it's awesome from Andrew Hull

  - egghead.io 에서 리액트에 관련하여 ReactJS, React Native, Flux Architecture를 동강으로 제공한다. 물론 무료가 있다. 

    * 유료강좌를 듣길 추천한다. 앵귤러와 리액트에 대한 좋은 강좌가 많다. 한달 대략 15달러

    + Hello World 만들기

    + Render Method, Properties, State 사용하기

    + 컴포넌트 조합하기, refs 사용하기 

  - 제이쿼리를 리액트로 바꾸는 과정을 잘 설명해 주고 있다. 글을 읽고 다시 egghead.io 를 보면 이해가 될 것이다. 

    + jQuery to React 가이드

       내용중에 앵귤러를 사용하고 있는 개발자라면 앵귤러의 지사자에서 scope: { createXXX: '&' } 방식으로 자식의 부모의 함수를 호출 할 수 있다

       그리고 자식, 부모간에 scope 객체의 상속을 통해 scope 속성을 접근할 수 있다는 것도 알 수 있다. 

    + Flux 소개 아래 영상을 보면 react가 Virtual DOM을 통해 더 낳은 성능과 단순성을 통한 버그 가능성 제거를 이룰 수 있는지 가늠할 수 있다

       * Flux 사이트

      

  - 이제 다시 설치부터 기초 개념을 문서를 통해 쭉 살펴보자. 

    + React Starting (한글번역)

    + 작은 어플을 하나 만들어 보자.

    + Thinking in React

  - ng-conf 말고 react-conf도 있다. 동영상을 통해 향후 방향을 점쳐보자. 

    

  - 리액트 컴포넌트를 찾고 싶을 경우 

    + http://react-components.com

    + http://www.reactjsx.com

  - 리액트 자료 

    + Awesome 자료 목록들

    + 앵귤러와 결합해서 사용하기 : NGREACT 

  - 리액트 컴포넌트 프레임워크 : 트위터 부트스트랩같은 조합

   + reapp.io

  - 새 술은 새 푸대에 넣자. 리액트가 UI 컴포넌트라면 Webpack 또는 Browserify 를 이용해 모듈화 하자

    + 리액트를 위한 웹팩의 starter kit

    + Webpack 와 gulp generator를 통해 한방에 해결하자 (깃헙)

    + Browserify 와 gulp로 시작하는 React generator

  - 디버깅은 Chrome Extention 설치하고 시작

    

  - 스타터 킷트로 시작해 보자

  - 리액티브의 Diff 알고리즘에 대한 설명

  - 필요에 맞는 툴과 환경을 선택한다.

 

Immutable Data에 대한 이해 

불변 데이터에 대해 알아 두어야 한다. 예로 리스트를 생성하고 거기에 새로운 값을 넣으면 리스트를 가르키는 레퍼런스는 같을까 틀릴까? 기존 방식이라면 동일한 레퍼런스이겠지만 Immutable의 세계에 오면 값이 변경 되면 새로운 객체가 된다. 리액트에서는 성능향상을 위해 Immutable.js를 사용토록 권장하고 있다. 이것에 대해 발표한 영상을 보고 영상을 요약한 블로그 글을 보도록 한다. 

  - 영상 설명 블로그 [1], [2], [3]

  - 발표 영상

  - 최근 보고 있는 Clojure는 기본적으로 Immutable Data이다. 클로져 관련 블로그를 읽어보자.

자바스크립트 개념 장착

리액트를 하다 보면 this와 bind(this)를 자주 사용할 때가 있고, ES6로 전환하다보면 좀 더 빈번히 보게 된다. 제대로 이해하고 React 코드를 보자 

  - 자바스크립트의 bind, call, apply 이해 

  - 자바스트립트의 this 이해

  - bind를 해주는 이유 Callback 때문 그렇다면 Callback을 이해하자

  - Callback은 자바스크립트가 Funtional Programming이 가능하게 해주고 Closure이다. 클로저를 이해하자

  - React에서 Object만드는 것이 많이 나오니 자바스크립트의 Object에 대해 알아보자

  - Prototype 프로퍼티에 대해 배우자 (다이어그램으로 Object.prototype 이해하기)

    넥스트리의 프로토타입 상속에 대한 블로그 (http://insanehong.kr/ 글)

  - http://javascriptissexy.com/ 에서 다른 글도 참조하시라

<참조>

  - 태곤님의 프리젠테이션

  - React Natvie에 대한 이해

  - Reactive User Interface에 대한 이해, Meteor 프레임워크 기반의 Reactive Programming 이해 

  - Flux Architecture에 대한 이해

  - Rail에서 gulp, webpack, react 관계

  - 스포카의 도도포인트 앱을 위한 리액트 적용기

  - 2015 React Conf 발표자료와 동영상

  - Reddit의 AngularJS에선 되는데 ReactJS에선 어떻게 하죠?

  - 클라이언트 리액티브 템플릿 엔진 Reative.js

  - React를 사용하는 회사들