JSX

자바스크립트의 확장 문법
HTML 같이 보이지만 JavaScript
리액트 컴포넌트 파일에서 XML 형태로 코드를 작성하면 babel이 자바스크립트로 변환

JSX

const Block = () => {
  return (
      <div>
        <p>hello, world!</p>
      </div>
  );
};

JSX -> JavaScript

const Block = () => {
  return React.createElement("div", null, 
          React.createElement("p", null, "hello, world!"));
};

장점

일반 자바스크립트에 비해 JSX가 더 보기 쉽고 직관적이다.
컴포넌트를 HTML처럼 사용할 수 있다.

return <App/>;

문법

여러 요소가 있다면 부모 요소로 한 번 감싸야 한다.
자바스크립트 표현식을 사용할 때에는 코드를 {}로 감싼다.

function onClick() {
  alert("클릭");
}

const App = () => {
  return (
    <div>
      <p onClick={onclick}>클릭</p>
    </div>
  );
};

if문 대신 삼항 연산자

const App = ({ isEdit }) => {
  return (
    <div>
      <button>{isEdit ? '수정' : '등록'}</button>
    </div>
  );
};

class 대신 className
주석

{/* 주석 */}