React 1

ReactJs는 바닐라Js에서 브라우저와의 상호작용을 구현했던 것을 더욱 편하게 할 수 있도록 만든것이다.
바닐라js는 html을 만들고 js로 그 태그를 가져와서 eventListener를 달아주어야 했는데, ReactJs는 그 과정을 간소화 하여 태그의 생성과 eventListener부착까지 간편하게 할 수 있다.
바닐라js는 전체 페이지를 다시 불러오는반면에, html 코드에서 바뀐 부분만 업데이트된다.
(ReactJs도 컴포넌트 전체를 리렌더링 하긴 하지만)

JSX를 쓰기전에는 다음과 같이 작성해야 했다.
jsx를 쓰지 않으면 babel에서 해석해준것과 같이 작성해야 하는데, 잘 보면 바닐라js에서 작성했던것과 유사하다.

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

babel은 jsx를 다음과 같이 해석해준다.
babel은 jsx를 React.createElement() 호출로 컴파일한다.

//JSX
const Title = () => (
  		<h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
        	Hello I AM TITLE
      	</h3>
    );
//Babel
const Title = () => /*#__PURE__*/React.createElement("h3",
	{
  		id: "title",
  		onMouseEnter: () => console.log("mouse enter")
	}, "Hello I AM TITLE");