[React] 환경설정

원래 리액트는 웹팩이라는 Bundler로 실행한다.

이 강의는 리액트 문법과 리액트를 이해하기 위함이므로 React를 실제로 사용하는 환경설정은 하지 않는다.

 

1. React

 

리액트를 사용하기 위해서 기본적으로 환경설정이 되어야하는데 리액트에서 제공하는 개발용 cdn 링크가 있다.

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>

 

리액트에서도 직접 개발용으로만 쓰라고 명시되어있고 배포용으로는 추천하지 않는다.

CDN 링크 – React

 

나는 배포까지 할 내용이 아니므로 강의와 동일하게 cdn을 이용한다.

react.js 는 react 기능인 컴포넌트, 가상돔 등을 지원한다.

 

2. React-Dom

<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

 

React Dom은 가상 DOM을 실제 DOM에 렌더링 하는 작업과 같이 렌더링과 관련된 부가적인 기능을 수행해준다.

 

3. Babel.js

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

 

react에서는 JSX를 지원하는데 JavascriptXML로 HTML의 태그처럼 사용할 수 있는 문법이다.

babel.js가 JSX를 js로 변환해주고 es6를 지원하고 다양한 기능을 제공한다.

그 중 JSX를 js로 변환해주면서 develop 환경에서 react를 사용하기 더욱 편리해지므로 babel.js를 추가한다.

 <script type="text/babel" src="js/main.js" data-type="module" data-presets="react"></script>

react를 사용하려면 preset을 설정한다.