React 시작하기
새로 만든 프로젝트에서 React를 시작하려면 React를 로드하는 스크립트를 적용해야한다(파이썬에서 라이브러리 import 하는 느낌)
4번 라인에 react가 React의 핵심 라이브러리고
5번 라인이 React를 DOM과 함께 사용할 수 있도록 DOM 메서드를 제공한다
React를 로드하는 코드를 추가하면 여러 메서드를 사용할 수 있는데 기존에 명령형 프로그래밍 방식으로 만들었던것들을 ReactDOM.createRoot()와 root.render()로 작성할 수 있다.
하지만 이 상태로 브라우저를 열어보면 오류가 발생하는데 9번줄과 같은 <h1은 JavaScript가 아니라 JSX이기 때문에 오류가 발생한다.
JSX
JSX는 JavaScript의 확장으로 HTML과 문법이 비슷하다고 한다.
그런데 브라우저는 JSX를 기본적으로 이해하지 못해서 Babel과 같은 JavaScript 컴파일러가 필요하다.
위와 같은 코드를 추가하면 된다. 7번라인은 Babel 컴파일러이고 8번라인은 jsx코드로 반환한다는 내용이다
다시 index.html을 브라우저로 열어보면 기존에 만든것과 동일한 화면이 나오는데 코드는 훨씬 간결하고 직관적으로 작성됨을 볼 수 있다.
- 기존 명령형 프로그래밍방식
- 선언형 프로그래밍방식 React 코드
Q. React 코드를 컴파일해야 하는 이유는?
A. React는 JavaScript로 컴파일 해야하는 JSX를 사용한다.
