React에서 jquery, bootstrap 전역으로 사용하기
· 약 1분
create-react-app으로 만들어진 react 앱에서 jquery와 bootstrap을 사용하려면 다음과 같이 설정해주면 된다.
index.js
import "jquery/src/jquery";
import "bootstrap";
create-react-app으로 만들어진 react 앱에서 jquery와 bootstrap을 사용하려면 다음과 같이 설정해주면 된다.
import "jquery/src/jquery";
import "bootstrap";
ES5 스타일로 React 를 사용할 수 있지만 JSX 를 사용하기에 한 번은 컴파일이 필요하다. 따라서 ES6 의 문법을 사용하는게 낫다. (직관적이기도 하고) 그래서 ES6 의 문법이 익숙해져야하고, javascript 에서 this 를 왜 바인딩 하는지에 대한 이해가 필요하다.
React 를 제대로 사용하기 위해서는 JSX 라는 새로운 구문(확장자)로 javascript 를 짜야하는데, JSX 는 XML 스타일의 자바스크립트 표현식이라고 생각하면 된다. 브라우저에서 돌아가게 하려면 순수한 자바스크립트 형태가 되어야 하기 때문에 컴파일이 필요하다.
React 구버전은 JSXTranspiler 를 통해 변환을 했는데, 지금은 지원하지 않고 Babel을 사용해 컴파일 해야한다.
Babel 은 ES6 의 구문을 구버전의 브라우저에서 사용할 수 있게 컴파일해주는 자바스크립트 컴파일러라고 생각하면 된다. 추가적으로 JSX 도 컴파일해준다.
NodeJS 환경에서는 Gulp 를 이용해 자동으로 컴파일이 되게 설정할 수 있지만, 브라우저에서 단독으로 사용할 수 있게 해보는 방법을 알아보자.
# bower
$ bower install babel-standalone --save
# npm
$ npm install babel-standalone --save
또는 여기서 직접 받는다.
# bower
$ bower install react --save
# npm
$ npm install react --save
또는 여기서 직접 받는다.
<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>