Graceful Light

React 시작하기

2016-12-23


ES6과 this binding에 대한 이해

ES5 스타일로 React를 사용할 수 있지만 JSX를 사용하기에 한 번은 컴파일이 필요하다.
따라서 ES6의 문법을 사용하는게 낫다. (직관적이기도 하고)
그래서 ES6의 문법이 익숙해져야하고, javascript에서 this를 왜 바인딩 하는지에 대한 이해가 필요하다.

JSX 이란?

React를 제대로 사용하기 위해서는 JSX 라는 새로운 구문(확장자)로 javascript를 짜야하는데,
JSX는 XML 스타일의 자바스크립트 표현식이라고 생각하면 된다.
브라우저에서 돌아가게 하려면 순수한 자바스크립트 형태가 되어야 하기 때문에 컴파일이 필요하다.

React 구버전은 JSXTransfiler를 통해 변환을 했는데, 지금은 지원하지 않고
Babel을 사용해 컴파일 해야한다.

Babel 이란?

Babel은 ES6의 구문을 구버전의 브라우저에서 사용할 수 있게 컴파일해주는 자바스크립트 컴파일러라고 생각하면 된다. 추가적으로 JSX도 컴파일해준다.

NodeJS 환경에서는 Gulp를 이용해 자동으로 컴파일이 되게 설정할 수 있지만,
브라우저에서 단독으로 사용할 수 있게 해보는 방법을 알아보자.

설치

1
2
3
4
# bower
$ bower install babel-standalone --save
# npm
$ npm install babel-standalone --save

또는 여기서 직접 받는다.

React

설치

1
2
3
4
# bower
$ bower install react --save
# npm
$ npm install react --save

또는 여기서 직접 받는다.

실행

1
2
3
4
5
<script src="/bower_components/babel-standalone/babel.min.js"></script>
<script src="/bower_components/react/react.min.js"></script>
<script src="/bower_components/react/react-dom.min.js"></script>
<script type="text/babel" src="/react_login_form.jsx"></script>

babel과 react, 데이터 바인딩을 위한 react-dom을 가져온다.

그리고 react_login_form.jsx를 text/babel 타입으로 가져오면 된다.

예제

여담

주관적으론 데이터 바인딩을 위해서만 사용하려면 Vue를 사용하는게,
완벽한 SPA를 만들고 싶다면 역시 Angular2가 답인듯 싶다.

추가로 React와 Angular2의 비교를 보길 원한다.

🍺

Buy me a beer 🍗

공유하려면 QR코드를 스캔해주세요