JSX

App.js 코드

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;

import

다른 파일들을 불러와서 사용

모듈을 불러와서 사용하는 것은 브라우저에는 없던 기능

번들러

브라우저에 없는 기능을 사용하기 위해 파일들을 묶듯이 연결하는 것

ex) 웹팩, Parcel, browserify

리액트에서는 주로 웹팩 사용

JSX

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

XML과 매우 비슷하게 생김

JSX는 브라우저에서 실행되기 전에 코드가 번들링 되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환

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

로 작성된 JSX 코드는

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

처럼 변경

JSX의 장점

1. 쉽고 익숙하다
2. 활용도가 높다

JSX는 HTML과 비슷하게 생겼지만 완전히 똑같지는 않다. 코드로 보면 XML 형식이지만 실제로는 자바스크립트 객체이며, 용도와 문법이 다르다