JSX(Javascript XML)는 자바스크립트 파일에 html처럼 코드를 짤 수 있게 해주는 js 확장문법이다.

JSX 작성 방법

Index.js

// Index.js
import { createRoot } from "react-dom/client";
import App from "./App";
const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
root.render(
  <div>
    <App />
  </div>
);

먼저 React에서 코드를 작성할 때 부모 요소 하나가 전체를 감싸야한다.
위 코드에서 <App /> 태그는 위쪽에서 import한 App.js 파일 안의 내용을 가져오는 방법이다.
이를 "컴포넌트" 라고 한다.

App.js

// App.js
import Header from "./Header";
import MainPage from "./MainPage";

export default function App() {
  return (
    <div>
      <Header />
      <MainPage />
    </div>
  );
}

App.js에서는 Header와 MainPage를 import한다
Index.js에서 App.js를 컴포넌트로 사용하기 때문에 App()함수 앞에 export default를 붙여주어야 Index.js 에서 import 하여 사용할 수 있다.

Header.js

// Header.js
import "./Header.css";

export default function Header() {
  return (
    <header>
      <nav className="Navbar">
        <div className="nav_in_nav">ReactFacts</div>
        <div className="text">React Course - Project 1</div>
      </nav>
    </header>
  );
}

MainPage.js

// MainPage.js
import "./MainPage.css";

export default function MainPage() {
  return (
    <div className="MainPage">
      <h1 className="mainh1">Fun facts about React</h1>
      <div className="mainmenu">
        <li className="lili">Was first released in 2013</li>
        <li className="lili">Was originally created by Jordan Walke</li>
        <li className="lili">Has well over 100k stars on GitHub</li>
        <li className="lili">Is maintained by Facebook</li>
        <li className="lili">
          Powers thousands of enterprise apps, including mobile apps
        </li>
      </div>
    </div>
  );
}

위와 같이 페이지 하나를 세부적으로 나누어서 각각 코드를 작성하는 방식을 컴포넌트 단위로 작업할 수 있다. 필요한 페이지들을 하나씩 import하여 하나의 부모 요소로 묶어야 하는 방식을 활용하는 것이다.