이 전 글에서 react를 import 했기 때문에
<script>
const span = React.createElement()
</script>
createElement function을 가진 React object에 접근할 수 있다.
<script>
const span = React.createElement("span");
</script>
괄호 안에 "span"
은 내가 생성하고자 하는 HTML 태그와 똑같은 이름이어야만 한다.
React JS가 HTML을 생성한다.
<body>
<span>Total clicks: 0</span>
<button id="btn">Click me</button>
</body>
이렇게 작성하지 않고 React가 대신 해준다. 하지만 실제로 하려면 react-dom을 사용해야 한다.
React JS는 어플리케이션이 interactive 하도록 만들어주는 library.(=엔진)
React-dom은 library 또는 package인데 모든 React element들을 HTML body에 둘 수 있도록 해준다.
하지만 이 방법은 매우 어려운 방법이고, 개발자들은 이렇게 사용하지 않는다.
모든 것이 처음부터 포함된 React JS 프로젝트를 생성하는 법이 따로 있다. (그러니 암기할 필요가 없다.)
<script>
const span = React.createElement("span");
ReactDOM.render()
</script>
render은 React element를 가지고 HTML로 만들어 배치한다는 것이다. 사용자에게 보여준다는 의미.
ReactDOM.render(a, )
a를 render 한다. 그리고 reactDOM
에게 어디에 span을 둘 것이다라고 말해주어야 한다.
사람들이 하는 방식은, 아래와 같이 id="root"
를 가진 div
를 만들고 ReactDOM
에게 span
을 root
안에 두라고 하는 것이다.
<body>
<div id="root"></div>
</body>
그렇게 하려면 먼저 root를 가져와야 한다.
<script>
const root = document.getElementById("root");
const span = React.createElement("span");
ReactDOM.render(span, );
</script>
이제 ReactDOM에게 말해주어야 한다. span을 root 안에 render 해달라고 말이다.
<body>
<div id="root"></div>
</body>
<script>
const root = document.getElementById("root");
const span = React.createElement("span");
ReactDOM.render(span, root);
</script>
<body>
의 <div>
는 마지막으로 적는 HTML이 될 것이다.
이 단계 이후로는 모두 아래와 같은 방식으로 React element를 생성할 것이다.
const root = document.getElementById("root");
const span = React.createElement("span");
ReactDOM.render(span, root);
<body>
<div id="root"></div>
</body>
<script>
const root = document.getElementById("root");
const span = React.createElement("span");
ReactDOM.render(span, root);
</script>
위 코드의 span은 현재 비어있다.
createElement
에는 우리가 더 작성할 수 있는 argument
가 있다.
예를 들어, 두 번째 argument
로 둘 수 있는 것은 span
의 property. property는 classname
이 될 수도 있고, id
가 될 수도 있다.
const span = React.createElement("span", {id: "sexy-span"});
위의 단 한 줄의 코드로 span
을 만들고 id
를 주었다. 하지만 아직 span
은 비어 있다.
채워주는 방법은 createElement
의 세 번째 argument
로 들어간다. (외울 필요 없음)
createElement
의 세 번째 argument
는 span
의 content(내용)이다.
const span = React.createElement("span", {id: "sexy-span"}, "Hello, I'm a span");
span
은 div
, button
도 되고, 유효한 HTML 코드이면 된다.
그리고 다음으로 property를 줄 수 있다.
하지만 결론은 지금까지 React JS가 너무 복잡하다는 것을 볼 수 있다. 그냥 HTML 페이지에 넣으면 되는데 여러 번의 복잡한 방법을 사용한다.
React JS는 우리가 해왔던 방식을 거꾸로 하고 있다는 것을 알 수 있다.
React JS의 핵심!!! 유저에게 보여질 내용을 컨트롤 할 수 있다는 뜻.
바닐라JS에서는 HTML을 먼저 만들기 -> 그걸 JS로 가져와서 -> HTML을 수정하는 방법.
하지만 React JS에서는 모든 것이 Javascript로 시작해 -> 그 다음에 HTML이 되는 방법이다.