예전의 리액트에서 위와 같은 요소를 만드려면
<body>
<div id="root"></div>
</body>
const Button = React.createElement(
'button',
{ onClick: () => console.log("im clicked"), style" {backgroundColor: tomato"}},
"Click Me" );
const container = React.createElement("div", null, [Button]);
ReactDOM.render(Button, root);
HTML보다는 쉽지만 이렇게 길게 코드를 작성해야 했다.
하지만 우리가 요즘 이렇게 리액트를 작성하는 사람은 거의 없고
좀 더 직관적으로 이렇게 코드를 짠다.
const root = document.getElementById("root");
const Button = (
<button
style={{ backgroundColor: "tomato" }}
onClick={()=>console.log("im clicked")}>Click me</button>
const container = React.createElement("div", null, [Button]);