컴포넌트

App.js 파일로 컴포넌트의 정의 알아보기

 App.js 파일을 열고 App() 함수와 App() 함수가 반환하는 값을 알아봅시다.

function App() {
  return <div>안녕!!!</div>;
}

export default App;

 

App() 함수가 정의되어 있고, 이 함수가 <div><h1>안녕!!!</h1></div>를 반환하고 있습니다. 이것이 바로 App 컴포넌트를 정의한 것입니다. App() 함수가 번환한 HTML이 리액트 앱 화면에 그려지는 것 입니다.

 

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

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

 

<App />을 ReactDOM.render() 함수의 첫 번째 인자로 전달하면 App 컴포넌트가 변환하는 것들을 화면에 그릴 수 있습니다.

App 컴포넌트가 그려질 위치는 ReactDOM.render() 함수의 두 번째 인자로 전달하면 됩니다.

App 컴포넌트는 아이디가 root인 엘리먼트에 그려질 것입니다.

아이디가 root인 엘리먼트는 index.html에 있습니다.

 

 

리액트는 <App />과 같은 표시를 컴포넌트로 인식하고, 그 컴포넌트가 반환하는 값을 화면에 그려줍니다.

컴포넌트를 사용할 때 <App />가 아니라 App이라고 입력하면 오류가 발생합니다.

리액트는 컴포넌트와 함께 동작하고, 리액트 앱은 모두 컴포넌트로 구성되는 겁니다.