[React] React DOM 다루기 (JSX 없이 element 그려보기)

 

VanillaJS로 element 생성

<script>
  const rootElement = document.getElementById("root");
  const element = document.createElement("h1");
  element.textContent = "VanillaJS";
  rootElement.appendChild(element);
</script>

 

React로 element 생성

<script type="text/babel">
  const rootElement = document.getElementById("root");
  const element = React.createElement("h1", { children: "ReactJS" });
  ReactDOM.render(element, rootElement);
</script>

 

두 element를 console로 확인해보자 

React 새로운 객체를 만들어냈고 그 안에 props에 children 이 들어가 있는 걸 확인할 수 있다 

 

* React에서는 props로 넘기지 않고 3번째 인자로 element를 생성할 수 있다 

const elementReact = React.createElement("h1", null, "ReactJS");

콘솔을 확인해보면 객체로 넣어주지 않아도  동일하게 props에 children으로 보이는 걸 확인할 수 있다. 

 

그럼 객체와 인자를 모두 적용하면 어떻게 될까?  

<script type="text/babel">
  const rootElement = document.getElementById("root");
  const elementReact = React.createElement(
    "h1",
    { ClassName: "title", children: "ReactJS!!!!" },
    "ReactJS"
  );
  ReactDOM.render(elementReact, rootElement);
  </script>

props에 children을 넣어도 3번째 인자값이 있으면 3번째 인자를 먼저 그린다 

 

 

children은 여러개를 넣을 수 있다. 

---

React :  element 생성

ReactDOM :  appendChild와 동일하게 render역할을 한다. 

 

React creactElement 공식문서 

https://ko.reactjs.org/docs/react-api.html#createelement

 

---