들어가며😃

리액트를 처음 접했을 때부터 npx react-create-app으로 프로젝트를 생성했었다. 그래서 CDN으로 리액트를 접하는건 나에겐 처음이였는데, 교육 프로그램에서 배워보았고 jsx 파일이 아닌 html 파일에서 리액트가 실행되는게 꽤 흥미로웠다. 오늘은 간단하게 리액트 CDN으로 리액트 프로젝트를 실행하는 법을 포스팅 해보려 한다.

html에서 리액트를 사용하는 절차는 간단하다.

  1. html 생성
  2. script 태그에 cdn 3개 추가
  3. 리액트 코드 추가


여기서 2번 과정에서 리액트와 관련된 2개의 js 파일, 그리고 babel 파일 1개를 설정한다. 여기서 왜 babel 설정파일이 필요한지 간단하게 알아보자

jsx 와 babel

jsx(JavaScript XML)는 Javascript에 XML을 추가한 리액트에서 사용되는 확장한 문법으로, HTML 태그와 유사한 형태이다. 비슷하긴 하지만 자바스크립트와는 다른 문법이기 때문에 브라우저가 읽을 수 있도록 변환할 필요가 있다. 그래서 babel이 필요한데 babel은 JSX와 같은 최신 자바스크립트 문법을 예전 브라우저나 환경에서도 동작할 수 있는 자바스크립트 코드로 변환해주는 컴파일러이다.




그리고 이를 불러오는 법은 아래와 같다.

리액트 CDN으로 불러오기

<head>
  <!-- ... -->
  <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
  <script type="text/babel">
    // babel 설정 꼭 해줘야함!
  </script>
</body>


이렇게 하면 기본적인 설정은 끝난것이다. 스크립트 태그 안에서도 다양하게 컴포넌트를 생성할 수 있다. 우선 root라는 id 를 가진 div 태그를 지정해주고 그 아래 MyComponent라는 컴포넌트를 생성해보겠다.

<div id="root"></div>
<script type="text/babel">
  const root = document.getElementById("root");
  function MyComponent(props) {
    return;
    <h1>hello, {props.name}</h1>;
  }
  ReactDOM.render(<MyComponent name="test" />, root);
</script>


리액트 프로젝트에서 하는 것과 똑같이 컴포넌트를 생성해주고 마지막에 ReactDOM.render(<MyComponent name="test" />, root); root에 컴포넌트를 랜더한다! 라는 구문만 추가해주면 된다.

WOW,,,이렇게도 리액트를 사용할 수 있다니,, 오늘도 한번 배우고 간다😎👍🏻