JSX

 

JSX는

1. XML과 유사하다.

2. JavaScript를 확장한 것으로 React와 함께 사용한다.

 

 

JSX로 작성한 코드는 브라우저에서 실행되기 전, 소스코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.

 

 

번들링 - 리액트를 사용하려면 import React from 'react';를 소스코드 안에 넣어주어야 한다. 모듈을 불러오는 것인데 이를 사용하는 것은 원래 기능이 아니므로 이 기능을 사용할 수 있도록 모듈을 하나로 묶어 사용하는데 이를 번들링이라고 한다.

 

 

바벨 - 크로스 브라우징을 지원하기 위한 기능이다. ES6+ 자바스크립트나 타입스크립트, JSX 등 다른 언어로 분류되는 언어들에 대해서 모든 브라우저에서 동작할 수 있도록 호환성을 지켜주는 역할을 한다!

 

 

JSX 문법

1. 컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 한다.

아래의 코드는 제대로 작동하지 않는다. h1, h2 요소가 있는 밖을 div 하나로 더 감싸주어야 한다. 
Virtual DOM에서 컴포넌트 변화를 감지할 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리로 이루어져야 한다는 규칙이 존재하기 때문이다.

import React from "react";

function App() {
 return (
   <h1>리액트</h1>
   <h2>페이스북에서 만들었습니다.</h2>
  );
}

2. JSX 안에서는 자바스크립트 표현식을 쓸 수 있다.

 

3. JSX 안에서는 if문을 사용할 수 없다.

 

4. undefined는 렌더링하면 안 된다.

JSX 내부는 괜찮지만 컴포넌트 함수에서 undefined만 반환하여 렌더링하면 오류가 발생한다. 

import React from "react";

function App() {
 const name = undefined;
 return name;
}

이 코드는 오류가 발생한다.

 

5. 태그에 클래스를 적용시킬 때는 class 대신 className을 사용해야 한다.

 

6. 태그는 꼭 닫혀야 한다.

 

7. 주석은 {/* */} 형식으로 작성하거나 태그 안에서 // 형식으로 작성한다.