const element = <h1>Hello, world!</h1>;

이 코드, 낯설면서도 익숙하다. HTML인지, 자바스크립트인지.

이런 형식의 코드를 보거나 배운적이 없지만 딱 봤을 때 이게 어떤 의미의 코드인지 명확하게 보이는 것 같다.

그래서 배워놓으면 사용하기 굉장히 편하겠다는 생각이 들었다.

이런 코드를 JSX라 하며 Javascript를 확장한 문법이다.

리액트에 사용하기 편리하기 때문에 필수적으로 알아야하는 문법이기도 하다.

function Title() {
      return (
        <h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
          Hi i'm h3
        </h3>
      );
    }

함수로 이벤트리스너 함수를 추가한 h3요소를 만들어주었다.

이 함수를 실행 시킬 때 마다 위의 요소를 쓸 수 있는 것이다. 이를 컴포넌트라고 한다.