createElement를 대체할 수 있는 방법
개발자에게 더 편리한 도구를 사용하기 위해 : JSX >> Javascript를 확장한 문법이다. HTML에서 사용한 문법과 흡사한 문법을 사용한다. 이렇게 React 요소를 만드는 것이 개발자들에게 편하다.
<!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>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
//JSX텍스트 변환을 위해선 꼭 TYPE을 적어줘야 한다.
const root = document.getElementById("root");
const Title = (
<h3 id="title" onMouseEnter={() => console.log("mouse Entered")}>
Hello I'm a title
</h3>
);
// const h3 = React.createElement(
// "h3",
// {
// onMouseEnter: () => console.log("mouse Enter"),
// },
// "Hello, I'm span"
// );
const Button = (
<button
style={{ backgroundColor: "tomato" }}
onClick={() => console.log("i'm clicked")}
>
Click me
</button>
);
// const btn = React.createElement(
// "button",
// {
// onClick: () => console.log("i'm clicked"),
// },
// "click me"
// );
const container = React.createElement("div", null, [Title, Button]);
//span과 btn을 render하기.
ReactDOM.render(container, root);
</script>
</html>onMouse : ()=> 했던것 대신 괄호 안에 쓰는 방식으로 바꾸고 Babel에게 코드를 넘겨준 것이다.
Element 에서 Babel에서 변환하기 전과 후의 코드가 나타난다.
결론 : JSX를 통해 property를 정의하는 방식이 더 편리해졌다.
최강 프론트엔드 개발자가 되고싶은 안유진 입니다