React #3

jihyun·2021년 9월 4일
0

react

목록 보기
3/4
post-thumbnail

JSX

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에서 겹치지 않음

0개의 댓글