React JS의 규칙 중 하나는 HTML을 페이지에 직접 작성하지 않는다는 것이다. 대신에 Javascript 코드와 React JS로 element를 생성할 것이다.
React JS로 element를 생성하는 어려운 방법
어려운 방식을 먼저 살펴보면서, React JS의 본질을 이해하자
<!DOCTYPE html>
<html lang="en">
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
// React JS는 어플리케이션이 interactie하도록 만들어주는 library이다. 엔진과 같다.
// React-dom은 library 또는 package인데 모든 React Element들을 html
body에 둘 수 있도록 해준다.
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script>
const root = document.getElementById("root");
const span = React.createElement(
"span",
{ id: "sexy-span", style: { color: "red" } },
"Hello, I'm span"
);
// 괄호 안에는 생성하고자 하는 html태그와 같은 이름을 넣어야 한다. argument 순서마다 무엇이 들어갔는지 잘 봐라.
ReactDOM.render(span, root);
// span을 root 안에서 render해달라는 말이다.
//render는 사용자에게 보여주는 것
</script>
</html>React JS 는 html에서 했던 방식을 반대로 하고 있다. Javascript로 시작해 html이되고 있다, 이것이 React JS의 힘이다.
이 말은 React JS가 결과물인 HTML을 업데이트 할 수 있다는 말이다. 유저에게 보여질 수 있는 내용을 업데이트 한다는 뜻.
react JS에게 업데이트 해야하는 HTML을 업데이트하라고 할 수 있음. 다음 강의에서 현재 이 코드를 대체할 것이다.
최강 프론트엔드 개발자가 되고싶은 안유진 입니다