[React.js] 단숨에 JSX 알아보기

React.createElement()를 많이 쓰면 코드 파악이 어려워요.
그래서 HTML과 유사한 방식으로 컴포넌트들을 생성할 수 있도록 JSX가 나왔어요.

create-react-app으로 프로젝트를 생성해요.

npx create-react-app jsxtest

src/App.js를 열어보면 div, img, p, a 등 익숙한 태그들이 보이죠?
컴파일 하면 HTML로 변환되지만 현재 상태는 리액트 컴포넌트에요.
class 대신 className을 쓰고 for 대신 htmlFor를 쓰는 등의 차이가 있어요.

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

브라우저에서 페이지를 확인해요.

yarn start

함수형 컴포넌트도 쉽게 만들 수 있어요.

function HelloWorld(props) {
    return (
        <h1>
            Title is {props.title}, Num is {props.num}
        </h1>
    );
}

function App() {
    return (
        <div>
            <HelloWorld title="Hello World" num={12} />
        </div>
    );
}

export default App;

props에 값을 전달할 때 문자열은 {} 없이 사용 가능해요.
위 코드에서 title={"Hello World"}로도 사용할 수 있어요.