설치 없이 React 사용하기: CDN을 이용한 웹 호스팅 환경에서의 React 활용

import React from 'react';

function HelloReact() {
  return (
	<div>
	  <h1>Hello React</h1>
	</div>
  );
}

export default HelloReact;

위에 코드를 실행하면 “Hello React” 라고 출력 하는 것을 알수 있는데요, 이러한 리엑트 코드를 실행하기 위해서는 필요한 어플리케이션을 설치해야 하는데, 서버호스팅이 아닌 웹호스팅과 같은 환경에서는 사용을 할수 없죠.

그래서 이번에 어플리케이션 설치 없이 리엑트(React)를 사용하는 방법에 대해 소개해 드리겠습니다.

먼저, 리엑트를 사용하기 위해서는 보통 Node.js와 npm 그리고 yarn 을 설치해야 합니다. 그런데, 이런 도구들을 설치할 수 없는 환경에서는 어떻게 리엑트를 사용할수 있을까요?

이런 경우에는 unpkg.com과 같은 CDN(Content Delivery Network)을 이용하면 됩니다. CDN은 특정 자원을 전세계의 여러 서버에 분산시켜 놓고, 사용자가 요청하면 가장 가까운 서버에서 해당 자원을 제공하는 시스템입니다.

이를 이용하면 어플리케이션이나 라이브러리를 설치하지 않고도 사용할수 있습니다.

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

위와 같이 3개의 자바스크립트파일(js) 불러오면 되는데요, 첫번째 파일은 리엑트 컴포넌트를 정의하고, 두번째 파일은 ReactDOM.render() 함수를 이용해서 웹 페이지에 랜더링을 합니다. 그리고 마지막 babel.min.js 파일은 JSX 파일을 자바스크립트 코드로 변환해 주는 역할을 합니다.

처음에 2개 react.development.js 파일과 react-dom.development.js 파일은 리엑트를 사용하기 위해 필요한 파일이며, babel.min.js 파일은 JSX 파일을 자바스크립트 코드로 변환해 주는 역할을 합니다.

<!DOCTYPE html>
<html>
    <head>
        <title>React Sample Page</title>

        <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
        <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
        <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    </head>
</html>
<body>
    <div id="root"></div>

    <script type="text/babel">
        function HelloReact() {
            return (
                <div>
                    <h1>Hello React</h1>
                </div>
            );
        }

        ReactDOM.render(<HelloReact />, document.getElementById('root'));

    </script>
</body>

그래서 처음에 작성 했던 코드를 위와 같이 동일하게 동작하는 코드로 변환해 볼수 있습니다.

다만, 사용의 효율적이나 unpkg.com 사이트와 연결등 문제가 발생할수도 있기 때문에, 학습 목적이나 개인 사용 목적이 아닌 경우는 npm과 같은 패키지 관리 도구를 사용하여 모듈을 관리하는 것이 좋습니다.

답글 남기기 응답 취소