React란?
React는 UI 컴포넌트 라이브러리로 다른 특별한 템플릿 언어가 아닌 자바스크립트를 이용해서 만든다.
React UI 컴포넌트는 매우 독립적이며 특정 관심사에 집중된 기능 블록이다. 예전에도 컴포넌트 기반 아키텍처(CBA)는 존재했었으나 React는 템플릿 언어가 없는 순수 자바스크립트를 기반으로 CBA를 구현해낸 점에서 차이가 있다.
React의 장점
간결성
선언형 스타일
React는 뷰를 자동으로 갱신하는 선언형 스타일을 채택한다. 선언형으로 작성하면 복잡도를 줄여줄 뿐만 아니라 코드에 대한 이해도와 가독성을 높일 수 있어서 명령형보다 더 낫다.
아래 명령형코드를 실행하면 각 값이 두 배가 되고 console에서 a[2,4,6,8,10] 이라는 결과를 확인할 수 있다.
var arr = [1,2,3,4,5], arr2 = []
for (var i=0; i<arr.length; i++) {
arr2[i] = arr[i] * 2
}
console.log('a', arr2)지금은 간단하지만 명령문이 늘어날 수록 마지막 결과를 예측하기가 어려워진다.
다음은 선언형 프로그래밍 방식으로 위의 코드와 동일하다. 일반적으로 선언형 프로그래밍이 더 단순하고 가독성이 높다.
var arr = [1,2,3,4,5];
var arr2 = arr.map(function(v, i) {
return v * 2;
}
console.log('b', arr2)React 는 UI를 구성할 때 선언형 스타일로 작성하면 뷰에서 변경이 발생하는 경우 React 가 알아서 갱신한다.
React 는 내부적으로 가상 DOM을 사용하여 브라우저에 이미 반영된 뷰와 새로운 뷰의 차이점을 찾아낸다. 이 과정을 DOM비교 또는 상태와 뷰의 보정이라고 부른다. 따라서 개발자는 명시적으로 뷰를 변경하려고 할 필요가 없다. 상태를 갱시하면 뷰는 알아서 갱신된다.
AngularJS 같은 경우에도 뷰와 모델을 양방향 바인딩하여 자동으로 뷰를 갱신해준다. 하지만 양방향 바인딩은 기능이 늘어나면 갑작스럽게 다른 뷰에서 모델을 갱신하거나 그 모델이 다른 뷰를 갱신하는 문제가 발생하기도 한다.
순수 자바스크립트 기반의 CBA
템플릿 엔진 같은 도메인 특정 언어(DSL)를 사용하지 않는다. AngularJS, Backbone, Ember 같은 기존의 프론트엔드 MVC 프레임워크들은 자바스크립트와 템플릿이 분리돼 있다. 컴포넌트에 두 가지언어를 사용할 경우 몇가지 문제가 발생하는데 가장 큰 문제는 개발자가 새로운 언어를 배워야 한다는 점이다. React는 순수 자바스크립트 이므로 새로운 언어를 배울 필요가 없다.
추상화
React 는 DOM을 쉽게 다룰 수 있고 크로스 브라우징을 위해 다르게 구현할 수밖에 없었던 인터페이스나 이벤트 핸들링을 정규화했다. 예를들어 React에서 onClick 이벤트가 발생하면 이벤트 핸들러는 브라우저의 원본 이벤트 객체 대신 이 원본 객체를 감싼 합성 이벤트 객체를 전달받는다. 브라우저 종류와 상관없이 항상 같은 이벤트 객체를 전달받는 것이다.
속도와 테스트 용이성
불필요한 DOM 갱신은 UI가 복잡해질 수록 성능이 저하된다. 동적인 UI 가 많은 웹페이지의 경우 사용성이 눈에 띄게 떨어지게 되는데 React의 가상 DOM은 자바스크립트 메모리에만 존재한다. 데이터를 변경하면 React는 가상 DOM을 먼저 비교하고 렌더링이 필요한 경우에만 실제 DOM을 렌더링해서 성능이 뛰어나다.
또한 PhantomJS 같은 헤드리스 브라우저 없이도 단위 테스트가 가능하다. Jest (https://facebook.github.io/jest) 를 사용하면 명령줄에서 바로 React 컴포넌트를 테스트할 수 있다.
폭넓은 React 커뮤니티와 생태계
React의 개발 커뮤니티는 엄청나게 많다.
React 컴포넌트 목록
http://devarchy.com/react-components
devarchy.com is for sale | HugeDomains
Get the premium .com domain you deserve. Seamless and professional transactions. Payment plans available.
www.HugeDomains.com
ReactJS Examples, Demos, Code
react.rocks
https://khan.github.io/react-components
React Components
Introduction This is a collection of some of the most reusable React components built at Khan Academy. In the jQuery ecosystem there's a large collection of plugins that can be used for anything from modals to translation. We're trying to make it just as e
khan.github.io
http://www.reactjsx.com
www.reactjsx.com
React 구글 트랜드
React 적용
React 로 프론트엔드를 개발하기 위해 특정 백엔드를 꼭 사용할 필요는 없다. React 는 MVC에서 V를 대체하는 UI 라이브러리일 뿐 기존 MVC 프레임워크와 결합도 가능하다.
버전 0.14 부터 React를 react 와 react-dom 이라는 두 패키지로 분리해서 npm에 배포하기 시작했다. react를 웹 개발뿐만 아니라 UI 개발이 필요한 환경이라면 어디서나 사용할 수 있는 라이브러리로 만드는 과정을 시작한 것이다.
결과적으로 웹 개발에 React를 사용할 때는 react와 react-dom을 사용해야 한다.
개발스택
데이터 모델링과 백엔드 : RefluxJS(https://github.com/reflux/reflux.js), Redux(http://redux.js.org), Meteor, Flux(https://github.com/facebook/flux)
라우팅 : React Router(https://github.com/reactjs/react-router)
Bootstrap : React-Bootstrap(https://react-bootstrap.github.io)
HelloWorld
처음 시작해보니 간단하게 hello world 를 출력해보자.! 항상 하는 짓이다..
먼저 앞서 말했듯 react.js 와 react-dom.js 를 import 해준다.
ReactDOM render 메서드의 첫번째 매개변수에 있는 React createElement 메서드의 첫번째 매개변수는 두 가지 자료형을 받는다. 예제처럼 문자열로 된 HTML 태그나 React 컴포넌트 클래스 객체가 올 수 있는데 여기서는 h1 태그 문자열로 받았다.
<!DOCTYPE html>
<html>
<head>
<script src="js/react.js"></script>
<script src="js/react-dom.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/javascript">
ReactDOM.render( // h1 요소를 id가 content인 dom에 렌더링 한다.
React.createElement('h1', null, 'Hello world!'), // h1 요소를 생성한다.
document.getElementById('content')
)
</script>
</body>
</html>
'프로그래밍 > react' 카테고리의 다른 글
| React 컴포넌트 클래스와 속성 (0) | 2022.03.05 |
|---|
댓글