JSX 살펴보기

npm start명령으로 서버를 시작 하고 다음과 같이 코드를 변경해보자 

import "./App.css";

function App() {
  return (
    <div>
      <h2>Let's get started!!</h2>
    </div>
  );
}

export default App;

결과 화면 

App.js파일안에 html 코드가 보인다

이것은 JSX 문법이다

react프로젝트가 코드를 변형 해주기 때문에 동작 하는것이다 

 

https://ko.reactjs.org/docs/introducing-jsx.html

JSX 소개 – React

 

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

위에 희한한 태그 문법은 문자열도, HTML도 아닙니다.

JSX라 하며 JavaScript를 확장한 문법입니다.

UI가 어떻게 생겨야 하는지 설명하기 위해 React와 함께 사용할 것을 권장합니다.

JSX라고 하면 템플릿 언어가 떠오를 수도 있지만, JavaScript의 모든 기능이 포함되어 있습니다.

 

JSX란?

React에서는 본질적으로 렌더링 로직이 UI 로직(이벤트가 처리되는 방식,

시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등)과 연결된다는 사실을 받아들입니다.