JSX란?

JSX는 자바스크립트의 확장 문법이며 XML과 매우 비슷하게 생겼다.

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

만약 컴포넌트를 렌더링 할 때마다 JSX코드를 작성하는 것이 아니라 위 코드처럼 매번 React.createElement 함수를 사용한다면 매우 불편할 것 같다. 하지만 JSX가 매우 편하게 UI를 렌더링이 가능하다!!

 

   장점   

o 보기 쉽고 익숙하다!

        JSX르 사용하는 것이 더 가독성이 높고 작성하기 쉽다. HTML로 코딩하는 것과 비슷하기 때문이다.

o 더욱 높은 활용도!

        JSX에서 div, span과 같은 HTML태그를 사용할 수 있을 뿐 아니라, 컴포넌트도 JSX안에서 작성가능하다.

   문법   

정말 편리하지만 몇가지 규칙이 존재한다! 

감싸인 요소 

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

App.js

import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <Hello />
    <div>안녕히계세요.</div>
  );
}

export default App;

이런 코드는 오류가 발생하게 된다!!

그 대신에 하나의 태그로 감싸주셔야 한다.

import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <div>
      <Hello />
      <div>안녕히계세요</div>
    </div>
  );
}

export default App;

하지만, 이렇게 단순히 감싸기 위하여 불필요한 div 로 감싸는게 별로 좋지 않은 상황도 있다. 예를 들어서 스타일 관련 설정을 하다가 복잡해지게 되는 상황도 올 수 있고, table 관련 태그를 작성 할 때에도 내용을 div 같은걸로 감싸기엔 애매하다. 그럴 땐, 리액트의 Fragment 라는 것을 사용하면 된다.

 

[출처 ]https://react.vlpt.us/basic/04-jsx.html

4. JSX · GitBook