JSX?
리액트에서 사용하는 자바스크립트 확장 문법
브라우저가 알아들을 수 있게 바벨이 자바스크립트 형태의 코드로 컴파일함
장점?
HTML 태그를 그대로 사용하기 때문에 보기 쉽고 익숙
HTML 태그를 사용하는 동시에 자바스크립트도 JSX 안에서 동작
<>
<div className="loginBtn" onClick={() => console.log("click")}>Login
</div>
<br/>
<div style={(backgroundColor: "grey", height: "10px"}} />
</>
-> 리액트에서 리턴되는 부분은 <> </> fragment로 감쌀 수 있음
-> JSX는 무조건 하나의 태그로 감싸져있어야 함
-> convention <div className="Login">
으로 주면 scss에서 겹치지 않음