JSX

JSX ( Javascript + XML )

• JavaScript를 확장한 문법
• JavaScript의 모든 기능이 포함되어 있으며, React Element를 생성하기 위한 문법
• HTML을 품은 JS이다.

JSX에서는 object를 자바스크립트 문법으로 넣어서 style 부여

return (
    /* <---- HTML/JSX 영역  ---->*/
    <div
      style={{
        height: "100vh",
        display: " flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center",
      }}

<div>
	<h1>안녕하세요!</h1> 
	<p>시작이 반이다!</p>
</div>

이 HTML은 JS파일에서 쓸 수 없음

const start_half = <div>
    <h1>안녕하세요!</h1>
    <p>시작이 반이다!</p>
  </div>;

그래서 나온게 jsx라고 생각하면 된다.

JSX에서 쓰는 <div>~~</div>는 DOM 요소가 아닌,
가상 DOM의 React 요소 이다.

• 돔을 구성하는 것 : 리엑트 요소
• 돔을 구성하는 것 : 돔 요소