[React] JSX

JSX란?

1. 특징

JSX는 JavaScript의 XML입니다.

JavaScript 문법의 확장판으로 리액트에서 요소를 제공합니다. 

• 컴파일에 최적화
• 확장자는 jsx 또는 js
• 컴파일 과정이 필요하므로 변환 과정에서 오류가 있다면 빌드 시 오류 발생

2. 사용 이유

1. React.createElement와 JSX를 비교하였을 때, JSX의 가독성이 훨씬 뛰어납니다.

2. Babel과 같은 컴파일 과정에서 문법적인 오류를 인지하기 쉽습니다.

3. 변환 과정

JSX의 문법으로 작성된 코드는 순수한 JavaScript로 컴파일하여 사용할 수 있습니다.

이를 가능하도록 하는 것이 바로 Babel입니다.

 

4. 사용 방법

4.1 CDN

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

 

CDN을 통해, 별도의 설치 없이 Babel 사용이 가능합니다.

 

4.2 작성법

<script type="text/babel"> // 아래에 JSX 문법 작성
  ReactDOM.render(
    <div>
      <div>
        <h1>주제</h1>
        <ul>
          <li>React</li>
          <li>Vue</li>
        </ul>
      </div>
    </div>,
    document.querySelector('#root')
  );
</script>

JSX 문법으로 코드를 작성하면 Babel이 자동으로 JavaScript 문법으로 컴파일을 진행하게 됩니다.

5. JSX 문법

1. 최상위 요소가 하나여야만 합니다.
2. 최상위 요소를 return하는 경우, ()로 감싸야합니다.
3. 자식 요소를 바로 렌더링하고 싶다면, <>자식 요소</>를 사용합니다. 이를 Fragment라 부릅니다.
4. 자바스크립트 표현식을 사용하려면, {표현식}을 이용합니다.
5. if 문은 사용할 수 없습니다. 삼항 연산자 혹은 &&을 사용합니다.
6. style을 이용하여 인라인 스타일링이 가능합니다.
7. class 대신 className을 사용해 class를 적용할 수 있습니다.