React를 처음 공부할 때, CDN 방식, 개발환경 방식(번들러, npm) 두 가지가 있다.
CDN 방식의 특징
- HTML 안에서만 임시로 React를 사용할 수 있음
- React, ReactDOM이 전역변수로 제공됨
- 로컬(Mac)에는 아무것도 설치되지 않음 (기존 설치해 둔 Node.js, npm 미활용)
- HTML 파일을 열면 React가 실행되는 것처럼 보이지만, 사실은 CDN에서 받아온 JS를 실행하는 것
npm 설치 방식과의 차이
- npm 방식은 Node.js 환경에 React 패키지를 설치해서 프로젝트 내부에 node_modules/react 형태로 저장
- CDN 방식은 로컬에 설치 하지 않고, 실행할 때마다 네트워크를 통해 React 코드를 불러옴
리액트 React를 처음 경험/실습 해볼 때,
리액트 설치 없이 HTML 내에서 script 태그로
React, ReactDOM을 직접 불러올 수 있는데, 이를 CND 방식이라고 한다.
브라우저가 외부 서버(CDN)에서 React 관련 JS 파일을 다운로드해서 실행하는 방식이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>React CDN Example</title>
<!-- React, ReactDOM CDN -->
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<!-- Babel (JSX 지원) -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<!-- JSX를 바로 사용하기 위해 type="text/babel" -->
<script type="text/babel">
function App() {
return <h1>Hello React (CDN)!</h1>;
}
ReactDOM.createRoot(document.getElementById("root")).render(<App />);
</script>
</body>
</html>
위 코드에서 아래 부분이 React와 ReactDom을 불러오는 부분이다.
<!-- React, ReactDOM CDN -->
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
(주의!) 최신버전을 불러오는 것은 아래처럼 버전 숫자를 명기하지 않으면 가능하다.
하지만 안정성을 위해 보통은 버전을 고정하는 걸 권장한다.
2025년 9월 16일 현재,
react 버전은 19.1.1까지 나와 있지만,
React 18이 제일 안정적이고 널리 쓰이고 있는 버전이다.
터미널에서 최신 react 버전을 확인하는 방법
npm info react version
'WEB DEV' 카테고리의 다른 글
| Node.js, npm, 그리고 nvm (버전별 설치/관리를 위한 터미널 명령어들) (0) | 2025.09.16 |
|---|---|
| [Python] 맥에 파이썬3를 설치했는데, 버전 확인이 안된다면?(파이썬 버전 확인방법) (0) | 2023.03.05 |
| [VSC] 맥용 비주얼 스튜디오 코드 필수 단축키(PDF) (0) | 2023.03.04 |
| [CSS] Reset CSS (CSS 초기화 하기, reset.css) (1) | 2023.03.04 |