본문 바로가기

프론트엔드 공부/react

React JSX 문법

왜 React.createElement 가 아닌 JSX를 쓰는지?
가독성, bable과 같은 컴파일 과정에서 문법적 오류를 인지하기 쉬움

JSX 문법
-최상위 요소는 하나
-최상위 요소 리턴하는 경우, ()로 감싸야한다.
-자식들을 바로 랜더링하고 싶으면 <>자식들</> 사용  => Fragment
(최상위 요소가 있는 상태에서 자식을 바로랜더링하고 싶을때, 최상위 요소를 <></>로 묶어주고 
자식요소들을 랜더링)
-자바스크립트 표현식을 사용하려면, {표현식}사용(변수도 사용가능)
-if문 사용할수 없음( 삼항연산자 , 논리연산자를 사용)
-style을 이용해 인라인 스타일이 가능
-class 대신 className을 사용해야 class를 적용
-자식요소가 있으면 꼭 닫아야하고 자식요소가 없으면 열면서 닫아야 한다.
<p>what</p>
<br />