CDN으로 리액트 사용하기

1. React 사용해보기

React를 사용하는 가장 간단한 방법은 CDN을 이용하는 것입니다. 복잡한 개발 환경 설정 없이 HTML 파일에 몇 줄의 스크립트만 추가하면 바로 React를 사용할 수 있습니다.

CDN(Content Delivery Network)이란?

전 세계에 분산된 서버 네트워크를 통해 웹 콘텐츠를 사용자와 가까운 위치에서 전달하는 시스템입니다. React와 같은 라이브러리를 CDN을 통해 사용하면, 별도의 설치 과정 없이 웹 페이지에 쉽게 포함시킬 수 있습니다.

1.1 HTML 파일 생성

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
</html>

1.2 React, Babel 관련 CDN 추가

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- React 19 UMD (커뮤니티 빌드) -->
    <script src="https://unpkg.com/umd-react/dist/react.development.js"></script>
    <script src="https://unpkg.com/umd-react/dist/react-dom.development.js"></script>
    <!-- Babel CDN -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  </body>
</html>

Babel이란?

최신 JavaScript 코드를 이전 버전의 JavaScript로 변환해주는 컴파일러입니다. React에서 주로 사용하는 JSX 문법이나 최신 ECMAScript 기능들을 브라우저가 이해할 수 있는 형태로 변환해줍니다. CDN으로 React를 사용할 때 Babel을 함께 사용하면, 브라우저 상에서 직접 JSX를 실행할 수 있게 됩니다.

1.3 컴포넌트 생성

body에 React 컴포넌트가 렌더링 될 루트 엘리먼트 생성

<div id="root"></div>

HelloButton 컴포넌트 생성

function HelloButton(props) {
  return <button onClick={() => alert('Hello')}>Click!</button>;
}

app 컴포넌트에 HelloButton 컴포넌트 추가

const app = (
  <div>
    <HelloButton />
    <HelloButton />
    <HelloButton />
    <HelloButton />
    <HelloButton />
  </div>
);

DOM에 React 컴포넌트 렌더링

const domContainer = document.querySelector('#root');
const root = ReactDOM.createRoot(domContainer);
root.render(app);

최종 코드

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>
    <!-- React 19 UMD (커뮤니티 빌드) -->
    <script src="https://unpkg.com/umd-react/dist/react.development.js"></script>
    <script src="https://unpkg.com/umd-react/dist/react-dom.development.js"></script>
    <!-- Babel CDN -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel">
      function HelloButton(props) {
        return <button onClick={() => alert('Hello')}>Click!</button>;
      }

      const app = (
        <div>
          <HelloButton />
          <HelloButton />
          <HelloButton />
          <HelloButton />
          <HelloButton />
        </div>
      );

      const domContainer = document.querySelector('#root');
      const root = ReactDOM.createRoot(domContainer);
      root.render(app);
    </script>
  </body>
</html>