개요

일반적인 React 사용방식인

1. package.json dependency에 React 추가
2. 스크립트 작성
3. 패키지 번들러를 사용한 빌드

방식이 아닌, CDN에서 import해서 jsx / tsx 없이 사용하는 방식에 대한 기록.

JSDelivr 등의 NPM 제공 사이트에서는 ESM등의 dependency 부여가능한 import 말고, 이하의 production 버전의 빌드된 모듈의 링크를 제공하기도 한다.

<script type="module"> 
  import react from 'https://cdn.jsdelivr.net/npm/react@18.2.0/+esm'
</script>

이런 빌드된 모듈을 import 하여 사용하는 것으로, 특징은 이하와 같다.

• package.json 안씀
• parcel/webpack 같은 패키지 번들러도 안씀

.NET의 Razor나 PHP의 Blade 등에서 라이브러리인 React의 특징을 살려 단순하게 사용해보기 위한 수단.

---

사용해보기

1. IMPORT 해보기

이하와 같이 import 할 수 있다.

import React from 'https://cdn.jsdelivr.net/npm/react@18.2.0/+esm';
import ReactDOM from 'https://cdn.jsdelivr.net/npm/react-dom@18.2.0/+esm';

위 항목들은 jsdelivr에서 모듈을 검색했을 때, ESM으로 제공되는 항목이다.

기본적인 주의사항이라면, 이렇게 사용한다면 이 스크립트 타입도 module 이어야 한다는 점 정도가 있을 뿐이다.

2. JSX / TSX 없이 컴포넌트 정의하기

JSX나 TSX를 사용하지 않을 것이다.

JSX나 TSX에서 사용하던 방식을 사용하지 않으므로, 함수 createElement로서 대체되어야 한다.

관련 공식 문서

구동되는 예시는 이하와 같다.

Html 부문

<div>
    <div id='app'></div>
</div>

Script 부문

import React from 'https://cdn.jsdelivr.net/npm/react@18.2.0/+esm';
import ReactDOM from 'https://cdn.jsdelivr.net/npm/react-dom@18.2.0/+esm';

function ReactNode(){
    return React.createElement(
        'div',
        {},
        `Hello World!`,
        React.createElement(
            InternalNode
        )
    );
}

function InternalNode(){
    return React.createElement(
        'div',
        {},
        `WOW Internal Element!`
    );
}

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

주목할 부분

상기 코드에서 주목할만한 부분은 이하와 같다.

• jsx / tsx에서 사용하던 부분이 함수로 수정된 만큼, 한 컴포넌트에서 사전정의된 자식 컴포넌트를 호출할 때도 createElement를 넣어야 한다. (ReactNode 함수 참조)
• 기본 React 적용 코드인 root.render 시에도 jsx / tsx를 쓸 때 사용하던 <ReactNode/> 방식이 아니라, 함수 그대로 ReactNode()를 호출해야 한다. (마지막 코드 참조)
• 페이지 진입할 때, 모듈 코드를 갖고오기 위해 CDN을 한 번 거쳤다가 온다.