레이아웃 만들 때 쓰는 JSX 문법 3개

JSX란 ?

• JSX(JavaScript XML)는 Javascript에 XML을 추가한 확장한 문법이다.
• JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아니다.
• 브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.

JSX의 3가지 문법

• className : 기존 html과 같이 태그에 클래스를 주고 싶을 때 사용
  • ex) <div className="test">asdasdasd</div>
• {중괄호문법} : let name = "하이하이"
  • javascript 처럼 document.querySelect(.h4).innerHtml = name; 이런식으로 사용하지않고 태그 사이에 {name} 중괄호 문법을 사용하여 변수를 넣을수 있다.
• style을 지정할땐 object 즉 <h4 style={{color : "red", fontSize : "30px"}}>{ post }</h4> 이런식으로 사용해야 한다.