JSX 문법

자바스크립트에서는 html태그를 바로 사용할수없음""로 묶어 사용해야함
하지만 리엑트에서는 자바스크립트에 html태그를 바로사용할수있다.
이렇게 해주는 것이 JSX문법

JSX문법

(1)return시에하나의 dom만 리턴할수있다.
(2)변수선언은 let혹은 const로만 해야함.
(3)if 사용불가능 -> 삼항연산자사용(조건 ? 값(true) : 값(false))

 <div>안녕{a===10 ? '10입니다':'10이 아닙니다.'}</div>

(4)조건부 렌더링 -> (조건 && 값(true) false일때는 값없음)

<h1>해딩 태그{b ===20 &&'20 입니다.'}</h1>

(5)css디자인
-내부에 적는 방법(추천안함)

const mystyle={
  color: "red"
};

 <div style={mystyle}>안녕{a===10 ? '10입니다':'10이 아닙니다.'}</div>

-외부 파일에 적는 방법

//App.css
.box-style {
  color: blue;
}

import './App.css';

<h1 className="box-style">해딩 태그{b ===20 &&'20 입니다.'}</h1>

-라이브러리 사용(부트스트랩,componet-styled)