React JSX 문법

JSX 문법

- 닫는 태그를 꼭 써야 한다.

모든 태그에는 닫는 태그를 꼭 넣어야 한다

ex) <div></div>

 

-최상위 태그 규칙

 

컴포넌트의 구성중에 가장 밖에 구성되는 태그
최상위 태그를 지워버리면 오류가 발생한다.
반드시 하나의 최상위 태그로 나머지 태그를 묶어야 작동한다
묶기 싫으면 <React.fragment>로 대체 가능이다/

 

리액트의 기능이기 때문에 
import React form 'react';

이렇게 import로 불어와야 한다.
<React.Fragment>로 최상위 태그로 묶어주면 해결이 가능하다.!

 

-className

jsx에서는 js처럼 클래스를 정할 때 class=""이 안되고
className=""으로 지정을 해야 설정해야 한다.

 

-{}

 

{} 안에는 값을 포함할 수 있지만 숫자만 문자열만 포함할 수 있다.

안에 삼항 연사자도 넣을 수 있다
이런 랜더링을 조건부 랜더링이라고 한다.