JSX(JavaScript + XML)

[학습 목표]
1. JSX 문법이 무엇인지, 어떻게 사용하는 것인지 학습합니다.
2. 우리가 만든 프로젝트 내의 JSX 문법을 통해 실습을 완료합니다.

JSX란?

//JavaScript를 확장한 문법
//JavaScript의 모든 기능이 포함되어 있으며, React Element를 생성하기 위한 문법
const element = <h1>Hello, world!</h1>;

엘리먼트는 단순히 화면에 그려지는 HTML적 요소

리액트에서는 딱 하나의 html 파일만 존재합니다.
(public 폴더 아래에 있는 index.html)
App.js 파일에서 보이듯, JSX 문법을 사용해서 React 요소를 만들고 DOM에 렌더링 시켜서 그립니다.

HTML을 품은 JS ⇒ JSX!

JSX 실습해보기

import React from "react";

export default function App() {
  const number = 11;

  const pTagStyle = {
    color: "red",
  };
  return (
    <div className="test-class"> {/* JSX에서는 class가 아니고 className이다. */}
      <p style={pTagStyle}>안녕하세요 리액트입니다.</p> {/* 변수로 스타일 넣는 법 */}
      {/* 주석을 사용하는 방법입니다. */}
      {/* 삼항 연산자를 사용해볼게요! */}
      {/* Javascript 값을 가져오려면 {} 중괄호를 써야한다. */}
      <p style={{ color: "red", }}> {/* json 형식으로 직접 스타일 넣는 법 */}
        {number > 10 ? number + "은 10보다 크다" : number + "dms 10보다 작다"}
      </p>
    </div>
  );
}