JSX

JSX(JavaScript XML)는 간단히 말하면 자바스크립트 안에 있는 HTML 코드이다.

JSX 코드는 백그라운드에서 브라우저가 읽을 수 있는 표준 JS 코드로 컴파일된다. 

 

리액트와 관련된 두 가지 의존성: react, react-dom

import ReactDOM from 'react-dom/client';

import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

index.js를 보면 react-dom은 사용하고 있는데 왜 react는 사용하지 않고 있을까? 

 

import React from "react";

 과거 리액트 프로젝트에서는 모든 리액트 컴포넌트 파일(JSX를 사용하는 모든 파일)에서 React를 import 해줘야 했다.

 

  return (
    <div>
      <h2>Let's get started!</h2>
      <Expenses expenses={expenses} />
    </div>
  );

위 JSX코드는 밑 JS코드로 백그라운드에서 자동으로 생성된다. 즉, JSX코드를 사용할 때 React 객체가 사용되기 때문에 React를 import 했어야 했다.

하지만 지금은 프로젝트 셋업이 그런 변환을 해주기 때문에 import문을 작성하지 않아도 된다.

 

return React.createElement(
  "div",
  {},
  React.createElement("h2", {}, "Let's get started!"),
  React.createElement(Expenses, { expenses: expenses })
  );