• 목차

개요

• 리액트 프로젝트를 살펴보자.
  • src/App.js, index.css, index.js
  • public/index.html

index.js

import React from 'react';
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 는 npm start 시 보여지는 첫 페이지의 자바스크립트 파일이다.
• 자바스크립트 안에 있는 HTML 코드를 jsx 라고 한다.
• jsx 코드를 반환하는 App.js 를 import 하고 가져온다.
• 그리고 사용자 지정 <App> element 를 ‘root’ id 로 지정된 element 에 렌더링을 한다.

index.html

<!-- index.html -->
<div id="root"></div>

• Public Package 를 보면 단일 페이지(index.html)를 볼 수 있다.
• 바로 이 index.html 이 해당 리액트 애플리케이션 만든다.
• 리액트로 만든 SPA(Single Page Application)는 서버에 하나의 HTML 을 두고 그 파일상의 DOM과 화면에 표시되는 내용을 제어한다.
• index.html 에서 root 라는 id 를 가진 <div> 를 볼 수 있다.

App.js

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

export default App;

• 자바스크립트 함수 App 은 jsx 코드를 반환한다.
• 이 자바스크립트의 함수가 바로 리액트에서는 컴포넌트라고 불린다.