React와 vanila JS의 궁극적인 차이점은
React가 vanila JS와 정확히 반대 방향으로 일을 처리한다는 점이다.
vanila JS가 HTML에서 태그를 만들고 이를 queryselector이든, getElementById이든
무언가를 grab하여 가져오는 방식이라면,
React는 태그를 만드는 순간부터가 하나의 React언어로 작동한다.
<!DOCTYPE html>
<html lang="en">
<body>
<div id="root"></div>
</body>
<!-- How to import React(engine) -->
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<!-- How to import React-dom(put elements into HTML) -->
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script>
const root = document.getElementById("root");
const span = React.createElement(
// HTML Element
"span",
// properties (eg. class, id, css ...)
{ id:"sexy-span", style: { color:"red" } },
// content
"Hello I am a span");
ReactDOM.render(span, root);
</script>
</html>'FrontEnd > React' 카테고리의 다른 글
| [ReactJS] render, rerender (0) | 2023.01.05 |
|---|---|
| [ReactJS] JSX 문법 (0) | 2023.01.05 |
| [ReactJS] JSX 문법과 babel 설치하기 (0) | 2023.01.05 |
| [ReactJS] React에서 EventLister 구현하기 (0) | 2023.01.04 |
| [ReactJS] React 설치하기 (0) | 2023.01.04 |
