JSX란?
아래 변수 선언을 살펴보겠습니다.
|
const element = <h2>Hello World!!!</h2>
|
위의 문법은 문자열도 HTML도 아닙니다.
JSX라고 하며 JavaScript를 확장한 문법입니다.
XML(eXtensible Markup Language) 문법을 따르기 때문에 다음의 규칙을 따릅니다.
- root태그가 반드시 있어야 합니다.
- 모든 태그들은 내포되어 중첩되어야 합니다.
- 그리고 반드시 닫는 태그가 존재해야 합니다.
- 태그 이름은 html 태그를 쓰면 그대로 인식하며 어떤 태그를 사용해도 됩니다.
- 사용자가 만들어 사용해도 됩니다.
JSX는 필수가 아닌 선택사항이지만 사람들은 UI코드를 짤 때 JSX를 쓰는 것이 더 편리하다고 생각합니다. 기존 프로젝트에서 JSX 태그를 써보는 제일 빠른 방법은 <script> 태그를 집어넣는 겁니다. 최신 문법의 JSX를 사용하려면 CDN 주소 하나를 더 추가로 지정해야 합니다.
|
<!-- JSX 빠르게 시도해보기 -->
|
이제 <script> 태그에 type속성을 type="text/babel"으로 추가하면 JSX를 바로 사용할 수 있습니다.
render()안에 기술한 내용은 html 태그가 아닙니다. JSX 문법입니다.
|
<!-- 반드시 type속성을 type="text/babel"으로 지정해야 됩니다. -->
<script type="text/babel">
window.onload = () => {
ReactDOM
.createRoot(document.querySelector('#app'))
.render(
<h2>My React Application!!!</h2>
);
}
</script>
|
전체 코드는 다음과 같습니다.
|
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
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React 예제 003</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>
<!-- JSX 빠르게 시도해보기 -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!-- 반드시 type속성을 type="text/babel"으로 지정해야 됩니다. -->
<script type="text/babel">
window.onload = () => {
ReactDOM
.createRoot(document.querySelector('#app'))
.render(
<h2>My React Application!!!</h2>
);
}
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
|
cs |
다음은 실행 결과 입니다.
JSX 문법이 그대로 실행되는것은 아닙니다. F12키를 눌러 개발자 모드로 들어가 Element탭을 보시면 JSX코드가 JavaScript코드로 변경되었는 모습을 볼 수 있습니다.
다음의 변경된 코드를 보면 <h2>태그의 내용이 React.createElement() 명령어로 자동 변경된 것을 확인할 수있습니다.
React.createElement() 명령은 React 엘리먼트를 생성할 수 있습니다. JSX를 작성하는 대신 사용할 수 있습니다.
하지만 새로 작성할 코드에서 사용을 추천하지 않습니다. 더 이상 사용되지 않는 API 로 추후 React major 버전에서 제거될 예정입니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<script type="text/babel">
window.onload = () => {
ReactDOM
.createRoot(document.querySelector('#app'))
.render(
<h2>My React Application!!!</h2>
);
}
</script>
<script>
'use strict';
window.onload = function () {
ReactDOM.createRoot(document.querySelector('#app')).render(React.createElement(
'h2',
null,
'My React Application!!!'
));
};
</script>
|
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 01] HTML로 시작해보는 React Application (3) | 2024.10.15 |
