간단하게 HTML문서 만으로 React Application을 만들어 볼 수 있습니다.
1단계 : HTML문서를 만듭니다.
2단계 : 다음의 스크립트 태그를 원하는 곳에 추가 합니다. <head>태그 <body>태그 어디에 넣어도 됩니다.
저는 </body>태그 뒤에 넣었습니다.
|
|
위 버전은 개발 용도로만 사용해야하며, 프로덕션에는 적절하지 않습니다.
React의 최적화된 프로덕션 버전은 다음과 같이 사용할 수 있습니다.
|
|
react 나 react-dom 의 특정 버전을 불러오고 싶다면, 18을 원하는 버전의 숫자로 바꾸면 됩니다.
만약 Bower를 사용한다면, React는 react 패키지를 통해 사용할 수 있습니다.
만약 React를 CDN으로 제공한다면, crossorigin 속성을 주는 걸 권장합니다.
3단계 : 다음의 자바스크립트 태그를 추가합니다.
|
1
2
3
4
5
6
|
<script>
document.body.innerHTML = '<div id="app"></div>';
ReactDOM
.createRoot(document.querySelector('#app'))
.render("나의 첫번째 리액트 애플리케이션!!!");
</script>
|
cs |
2행은 div태그를 id속성을 app로 지정해서 문서에 추가하는 코드입니다.
3행 ~ 5행의 코드가 React코드 입니다.
문서에서 id 속성의 값이 app인 DOM 객체를 찾아 ReactDOM의 Root객체를 만든 후 찾은 객체에 내용을 추가 합니다.
다음과 같이 3줄로 작성해도 동일하게 작동합니다.
|
1
2
3
4
5
6
|
<script>
document.body.innerHTML = '<div id="app"></div>';
const domContainer = document.querySelector("#app");
const root = ReactDOM.createRoot(domContainer);
root.render("나의 첫번째 리액트 애플리케이션!!!");
</script>
|
cs |
다음은 완성된 전체 코드 입니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React 예제 001</title>
</head>
<body>
</body>
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script> <script> document.body.innerHTML = '<div id="app"></div>'; ReactDOM .createRoot(document.querySelector('#app')) .render("나의 첫번째 리액트 애플리케이션!!!"); </script> </html>
|
cs |
다음은 실행 결과 입니다.
body 태그 안에 미리 div 태그를 다음과 같이 만들어 놓을 수도 있으며 script태그를 상단에 사용하고 싶다면
onload 이벤트를 지정해서 사용해도 됩니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React 예제 002</title>
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script>
window.onload = ()=>{
ReactDOM
.createRoot(document.querySelector('#app1'))
.render("나의 첫번째 리액트 애플리케이션!!!");
}
document.addEventListener('DOMContentLoaded', ()=>{
ReactDOM
.createRoot(document.querySelector('#app2'))
.render("나의 첫번째 리액트 애플리케이션!!!");
});
</script>
</head>
<body>
<div id="app1"></div>
<hr/>
<div id="app2"></div>
</body>
</html>
|
cs |
다음은 실행 화면 입니다.
한곳이 아닌 여러곳에 리액트를 이용하여 원하는 작업을 수행할 수 있습니다.
'Front End > React' 카테고리의 다른 글
| [React Exam 06] HTML로 시작해보는 React JSX Style 사용하기 (1) | 2024.10.15 |
|---|---|
| [React Exam 05] HTML로 시작해보는 React JSX 속성 표현식 사용하기 (0) | 2024.10.15 |
| [React Exam 04] HTML로 시작해보는 React JSX 함수 표현식 사용 (0) | 2024.10.15 |
| [React Exam 03] HTML로 시작해보는 React JSX JavaScript 표현식 포함하기 (0) | 2024.10.15 |
| [React Exam 02] HTML로 시작해보는 React JSX(JavaScript를 확장한 문법) (0) | 2024.10.15 |
