JSX 자세히 보기

개발자 도구를 열어보면 자바스크립트 파일을 확인해볼 수 있다

브라우저는 jsx 문법을 지원하지 않는다

화면 뒤에서 일어나는 변환 덕분에 여기에서 작동한다

 

package.json을 보면 react와 react-dom이 있는데 
우리 프로젝트에서는 react를 사용하지 않고 있다. 

오래된 버전의 리액트에서는 항상 import React from "react"; 구문을 모든 파일에서 작성했어야 했다

이제 이 import는 모든 곳에서 생략할 수 있는데 이것 역시 프로젝트 위에서 일어나는 마법같은 변환의 과정 중 하나라고 할 수 있다. 

리액트 객체에서 호출된 두 가지 메서드를 변환했다
리액트를 import 해야 했던 이유다 

jsx를 사용할 때 위의 코드가 자동으로 생성되기 때문에 
react를 무조건 import 했어야 했다.

이제는 프로젝트 셋업에서 추가되는 import 없이도 변환이 가능하게 해준다

[React.createElement()]
첫번째 인자는 요소의 이름 두 번째 인자는 속성 요소, 세번째는 텍스트를 입력한다

그래서 jsx에서 하나의 div 태그만 작성해야 하는 이유가
우리가 return 또는 createElement에서 값을 보통 하나만 가질 수 밖에 없는 이유와 일맥상통하다고 보는 것과 같다고 생각하면 된다