[JSX] HTML 요소들을 .html이 아닌 .js에서 가지고 놀게 함
2020. 5. 18. 23:11ㆍ컴퓨터언어/React JS
728x90
반응형
<!DOCTYPE html>
<html lang="en">
<head>
<title>JSX</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="root"></div>
<script src="../src/index.js" type="text/javascript"></script>
</body>
</html>
// Vanilla
const div = document.getElementById("root");
const h1 = document.createElement("h1");
const ul = document.createElement("ul");
const li1 = document.createElement("li");
const li2 = document.createElement("li");
const li3 = document.createElement("li");
const li4 = document.createElement("li");
const li5 = document.createElement("li");
const li6 = document.createElement("li");
h1.innerText = "My Stacks"
li1.innerText = "HTML/CSS/JS"
li2.innerText = "NodeJS"
li3.innerText = "Python"
li4.innerText = "Django"
li5.innerText = "React"
li6.innerText = "Flutter"
ul.appendChild(li1)
ul.appendChild(li2)
ul.appendChild(li3)
ul.appendChild(li4)
ul.appendChild(li5)
ul.appendChild(li6)
div.appendChild(h1);
div.appendChild(ul);
document.querySelector("body").append(div);// React JSX
import React from "react";
import ReactDOM from "react-dom";
const list = (
<div>
<h1>My Stacks</h1>
<ul>
<li>HTML/CSS/JS</li>
<li>NodeJS</li>
<li>Python</li>
<li>Django</li>
<li>React</li>
<li>Flutter</li>
</ul>
</div>
)
ReactDOM.render(list, document.getElementById("root"))
react 모듈은 JSX를 가지고 JS파일 내에서 HTML 작업을 할 수 있게 한다.
JSX는 편한만큼 엄격하다.
JSX는 일반적인 JS와 달리 HTML에서 import 시 type="text/JSX"를 속성으로 넣어준다.
JSX는 순수 HTML과 달리 <img /> 같은 child가 없는 self-closing 태그의 경우 반드시 /를 적어주어야 에러가 안난다.
또한 img 태그에 alt 속성을 넣지 않으면 접근성이 낮다고 경고를 주기도 한다.
심지어 inline CSS 스타일을 주려면, {}를 이중으로 넣어야 한다.
어쨌든 JSX가 아주 편한 것임은 틀림없다.
참고) Babel은 ES6 등 최신 JavaScript 코드일지라도 모든 브라우저에서 동작할 수 있도록 코드를 변형해준다.
728x90
반응형
'컴퓨터언어 > React JS' 카테고리의 다른 글
| [Hook] 유저와의 UI 반응을 위한 상태관리 with Functional Components (0) | 2020.05.23 |
|---|---|
| [Map Function] 배열의 원소마다 함수를 각각 실행시켜주자 (0) | 2020.05.19 |
| [props] HTML 태그에서 attribute를 사용하듯, JSX 태그에서 커스텀속성 사용하기 (0) | 2020.05.19 |
| [JSX] 각 모듈마다 .jsx로 분리한 뒤 import, export하면 깔끔한 앱이 된다 (0) | 2020.05.19 |
| [React JS] 효율적인 프론트엔드 솔루션 (0) | 2020.05.18 |