[React] JSX 1

1. createElement를 대체할 수 있는 방법

굳이 createElement를 대체하는 이유는 개발자들에게 좀 더 편리한 도구를 사용하기 위해서이다.
그게 바로 JSX

JSX는 JavaScript를 확장한 문법이다.
생긴건 HTML이랑 비슷해서 JSX로 React 요소를 만드는게 개발자들 입장에서는 매우 편하다.

const h3 = React.createElement (
	"h3",
    {
    	id: "title",
        onMouseEnter: () => console.log("mouse enter"),
    },
    "Hello I'm a title"
);

위의 코드는 아주 오래된 방법이다. 개발자들은 절대 이렇게 사용하지 않는다. JSX가 있기 때문이다.
우리는 더 쉽게 아래 방식으로 표현할 수 있다.

const Title = (
	<h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
    Hello I'm a title
    </h3>
);

btn으로 복습해보자.

const btn = React.createElement (
	"button",
    {
    	onclick: () => console.log("im clicked"),
        style: {
        	backgroundColor: "tomato",
        },
    },
    "Click me"
);

위의 코드는 아래처럼 간단하게 바꿀 수 있다.

const button = (
	<button 
      style = {{
        backgroundColor: "tomato",
        }} 
        onClick={() => console.log("im clicked")}
    >
        Click me
    </button>

이렇게 createElement를 쓰지 않는 이유는 여러 가지 것들을 기억해서 코드를 작성해야 하는데 그에 반해 JSX는 더 이해하기 쉽게 코드를 구현할 수 있다. 심지어 HTML과 유사하다.

하지만 위와 같은 코드를 작성하면 에러가 나는데, 그 이유는 브라우저가 온전히 JSX를 이해하지 못해서이다.
그러면 브라우저가 JSX를 이해할 수 있게 뭔가를 설치해주어야 한다.

babel
babel은 우리가 적은 JSX로 코드를 브라우저가 이해할 수 있는 형태로 바꿔준다.

위의 코드들을 품고 있던 <script></script> 태그 안에 babel을 넣어주자.

<script type=""text/babel">
  const Title = (
      <h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
      Hello I'm a title
      </h3>
  );
  const button = (
	<button 
      style = {{
        backgroundColor: "tomato",
        }} 
        onClick={() => console.log("im clicked")}
    >
        Click me
    </button>
</script>