React 란?
유저 인터페이스를 만들기 위한 라이브러리
*React 네이티브 : 모바일 네이티브 앱을 리액트로 만들수 있음
정의
React는 페이스북에서 개발한 유저인터페이스 라이브러리로서 개발자로 하여금 재사용 가능한 UI를 생성 할 수 있게 해줍니다. 이 라이브러리는 현재 페이스북, 인스타그램, 야후, 넷플릭스를 포함한 많은 큰 서비스에서 사용되고 있습니다.이 라이브러리는 Virtual DOM 이라는 개념을 사용하여 상태의 변함에 따라 선택적으로 유저인터페이스를 렌더링합니다.
따라서, 최소한의 DOM 처리로 컴포넌트들을 업데이트 할 수 있게 해줍니다.
핵심
"Virtual Dom"
//JQuery
$("#content").html("whatever");
//JavaScript
document.getElementById("content").innerHTML = "whatever"
위처럼 "content" div 내용변경 시 실제 DOM을 직접 처리하는것은 성능도 느리고 비효율적이며 관리하기 힘듭니다. 간단한 처리의 경우 상관없지만 처리해야할 데이터가 많을 경우 관리하기 힘들어집니다.
반면, "Virtual Dom" 은 이를 추상화한 시킨것으로 자바스크립트 객체에 불과하며 그안에서 처리하는것은 이미 렌더링된 HTML 을 실제 DOM API 를 사용해서 처리하는것보다 훨씬 빠릅니다.
특징
1. Virtual DOM 을 사용합니다2. JSX: JSX 는 JavaScript 의 확장 문법입니다. DOM 엘리먼트들을 만들 때 JavaScript 형식으로 작성해야 하는 것을, XML 과 비슷한 형태로 작성할 수 있게 해줍니다. 이를 사용하는것은 권장사항이고 필수는 아닙니다. 하지만 사용하지 않으면 좀 불편합니다.
3. Components React는 모두 Component 에 대한 것 입니다. React 개발을 할 때는 모든 것을 Component 로서 생각해야 합니다. 컴포넌트에 대한 자세한 내용은 앞으로 작성 될 강좌에서 다루겠습니다.
장점
1. "Virtual Dom" 사용
2. 배우기 간단
: angular.js, ember.js, backbone.js 에서 데이터를 관리하는 controller 나 HTML 조각인 directive 처럼 코드를 분리하지 않고 "Components" 단 하나만 사용
3. 뛰어난 Garbage Collection 메모리관리 와 성능
4. 서버사이드 렌더링(초기구동 딜레이 & 검색엔진 최적화), 클라이언트사이드 렌더링 둘다 지원
5. 매우 간편한 UI 수정 및 재사용
6. 페이스북 개발자가 만들어 지속적인 업데이트 (밀어주고 있음)
7. 다른 프레임워크나 라이브러리와 혼용가능
단점
1. View only
: View 즉, 보여지는 부분만 관여하기 때문에 데이트 데이터모델링, 라우팅, AJAX 등의 기능이 없음
2. IE8 이하 지원 X (IE8 이하지원 하는방법 : React 14버전이하 사용)
