[React] JSX란?

JSX( JAVASCRIPT EXTENSIONS )

- 확장된 자바스크립트의 문법을 말한다.

 

자바스크립트와 html을 혼용해서 사용가능 하다.

function AComponent() { //여기는 자바스크립트

 const apple = "사과"; //여기는 자바스크립트

 return(
 
    <main>  //여기부터

        <h1>안녕</h1>

       <h2>아침에는 {apple}가 최고야 </h2>  //자바스크립트 변수 사용 {변수}

   </main>  //여기까지 HTML

  );

}

 

1. 중괄호를 사용한다고 다 표시는것은 아니다.

{숫자}

{문자}

{배열}

은 가능하나

💥true, undefined, null은 중괄호로 감싸도 화면에 표시되지 않는다.

 

추가로

💥 객체 자체를 렌더링 시키면 오류가 난다.

const obj = {a : 1};

{obj}  <- 에러

그렇다면?

점표기 법을 이용하면 된다.

{obj.a}

 

2. 모든 태그는 닫혀 있어야 한다.

 

3. 최상위 태그는 반드시 하나여야만 한다.

<div><div>

<main/>

오류

해결 : <>여기다 작성 </>로 묶어주면 됨.

 

4. JSX는 카멜케이스를 사용해야 한다.

예시

className

backgroundColor

style ={{ }}