리액트의 기본적인 코드 이해하기

// 리액트를 설치한 후 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를 사용하여
다른 파일(모듈)들을 불러오고, 사용할 수 있다.

※ 본래 브라우저에는 모듈을 불러와서 사용할 수 없다.
※ 이 기능은 Node.js에서 지원하는 기능
Node.js에서는 import가 아닌 require라는 구문으로 패키지를 불러옴

JSX란?

리액트에서 제공하는 자바스크립트 확장문법

return / div를 보면 HTML / javascript와 상당히 유사하게 생겼지만,

하나로 합쳐져있습니다, 이를 JSX라고 합니다.

예시)

function App() {
  return (
    <div>
      Hello <b>react</b>
    </div>
  );
}
// 이 코드가 바로 JSX
// 이 코드는 별생각 없이 HTML이나 javasciprt으로 착각할 수 있는데,

// 이를 javascript로 변환시켜보면
function App() {
  return React.createElement("div", null, "Hello ", ReactcreateElement("b", null, "react"));
}

보는 바와 같이 굉장히 불편하기 때문에 JSX를 사용하여 좀 더 편리하게 UI를 렌더링합니다.