React.js란 / React.js 정리

React.js

배경

스타트업 기업 위주로 React.js 가 굉장히 인기가 좋음. 특히 모바일 웹 적용시.

SPA(Single Page Web Application) 을 구현하기 위해 가장 좋은 라이브러리 중에 하나.

개발자 및 대학생(연구실) 들 사이에서 화제의 FrontEnd 프레임워크, 라이브러리.

개념

웹에서 상호작용하는 사용자 인터페이스를 만들기 휘해 Facebook에서 내부적으로 개발한 오픈소스 javascript 라이브러리

최초 한 번의 Request에 html, css, images, js 파일들 압축해서 클라이언트 브라우저 다운 받고, 그 후 요청한 Request에

동적 data만 서버를 통해 다운 받음

React(이하, React)는 자바스크립트와 XML을 이용해 조합형 사용자 인터페이스를 구축하는 엔진

Justin Deal(저스틴 딜)은 반응형 렌더링과 게임 엔진이 작동하는 방식의 유사성에 주목하고 React를 설명하는데 '엔진'이라는 용어를 처음 사용

React의 경우 ‘View’ 레이어만 핸들링 하기 때문에 이외의 부분에선 다른 기술이 필요함

특히, React를 '프레임워크'로 취급하는 경향성이 있는데 React는 프레임워크가 아님, React의 공식 문서에서 밝히고 있듯이 UI 개발을 위한 JavaScript(이하, 자바스크립트 or JS) 라이브러리

특징

JUST the UI : UI 컴포넌트를 만들기 위한 라이브러리

Virtual DOM : DOM Tree와 같은 구조체를 Virtual DOM으로 가짐.

‘diffing’ 알고리즘을 사용하여 문서의 변화를 확인하고, ‘Reconcillation’를 진행하기 때문에 부분적인 조작이 가능함

그리고 DOM을 직접 조작하는 것이 아니라 '인-메모리'에 존재하는 DOM 을 조작하는 것이기 때문에 효율적이고 빠름

DATA Flow : 단방향 데이터 흐름을 지향

JSX : Html과 유사한 스타일의 마크업 언어(순수 javascript)

React 컴포넌트에서 UI를 정의하는 표준적인 방법으로 널리 이용되고 있음

JSX는 컴파일 되기 때문에 JS에 비해서 실행 속도가 빠르고, Type-safe(정의된 연산에 대해서만 작동하며,정의되지 않은 연산은 결과를 제공하지 않는 것)하며 컴파일링 과정에서 에러를 감지 할 수 있음

AJAX : 모든 요청은 XMLHttpRequest 방식의 비동기적 처리

학습하기 위한 자바스크립트 필요개념

데이터타입 - 기본형과 참조형 구분 및 각 성격

명시적 형변환과 암묵적 형변환

배열 및 객체의 다양한 메소드에 대한 숙달

호이스팅

this (다양한 환경에서 달라지는 this에 대한 이해)

스코프, 스코프 체이닝

프로토타입 및 프로토타입 체이닝

클로저

부가적인 요소

npm

babel

webpack

es6 module

es6 class

관련 사이트 정보

React 공식 홈페이지 : https://facebook.github.io/react/index.html

React 깃허브 페이지 : https://github.com/facebook/react

React 공식 튜토리얼 : https://facebook.github.io/react/tutorial/tutorial.html

React 네이티브 공식 홈페이지 : https://facebook.github.io/react-native/

React 네이티브 깃허브 페이지 : https://github.com/facebook/react-native

React 네이티브 공식 튜토리얼 : https://facebook.github.io/react-native/docs/getting-started.html

React 영상 자료

React 컨퍼런스 2015 동영상 : https://www.youtube.com/watch?v=KVZ-P-ZI6W4&list=PLb0IAmt7-GS1cbw4qonlQztYV1TAW0sCr

React 성능 비교 영상 : https://www.youtube.com/watch?v=z5e7kWSHWTg&feature=youtu.be&t=2m29s

React 한국 커뮤니티

React 페이스북 한국 사용자 그룹 : https://www.facebook.com/groups/react.ko/

React 공식 문서 한국어 번역 링크 : https://facebook.github.io/react/docs/hello-world.html

리액티스트 페이스북 한국 사용자 그룹 : https://www.facebook.com/login/?next=https%3A%2F%2Fwww.facebook.com%2Fgroups%2Freactist%2F

React 관련 국내 블로그

Spinbox로 React 겉핥기 by 개발왕 김코딩 : http://wit.nts-corp.com/2014/11/19/2584

REACTJS 둘러보기 – XHP부터 REACT NATIVE까지 by 김태곤 : https://taegon.kim/archives/5097

React Native를 사용한 초간단 커뮤니티 앱 제작 by 김태곤 : http://www.slideshare.net/taggon/react-native

서버와 클라이어트에서 동시에 사용하는 ReactJS by 김태곤 : http://www.slideshare.net/taggon/react-js-46357445

React 관련 참고 소스코드

김태곤 개발자가 만든 React 개발 예제 파일 : https://github.com/taggon/tidev

Awesome React Native : https://github.com/jondot/awesome-react-native

React 관련 유료 강의

에그헤드가 제공하는 React 유료 강의 1 : https://egghead.io/technologies/react

에그헤드가 제공하는 React 유료 강의 2 : https://egghead.io/courses/react-fundamentals

React와 함께 활용할 수 있는 기술

플럭스 공식 홈페이지  : https://facebook.github.io/flux/

플럭스 공식 홈페이지 번역 : http://haruair.github.io/flux/

웹팩 공식 홈페이지 : http://webpack.github.io/

React 핫 로더 관련 링크 : https://gaearon.github.io/react-hot-loader/

참조

http://cafe.naver.com/81th/108266

http://cafe.naver.com/hacosa/199665

http://www.sangkon.com/2016/08/03/react-study-01/

http://www.bloter.net/archives/233564