REACT. JSX란?

개요

기초를 단단히 다니자

리액트를 사용할 때 사용하는 기본적인 코드를 이해해보자

 

JSX란?

JSX는 자바스크립트의 확장 문법이다

이런 형식으로 작성한 코드는 브라우저에서 실행되기 전에

코드가 번들링되는 과정에서 바벨을 사용하여 일단 자바스크립트 형태의 코드로 변환된다고 한다

 

예문을 보자

아래는 JSX로 작성된 코드이다

function App(){
  return (
    <div>
      Hello <b>react</b>
    </div>
  );
}

아래와 같이 변환된다

function App(){
  return React. createElement("div", null, "Hello ", React.createElement("b", null, "react"));
}

막상 비교해 보니 JSX가 있음에 감사하게 된다

 

장점

- 보기 쉽고 익숙하다 (이건 예문만 봐도 느낄 수 있다)

- 높은 활용도 (HTML 태그 쓰듯이 작성하면 된다)