[React] 컴포넌트 02

컴포넌트의 계층 구조 ✨

지난 글에서 App에서 Header1, Header2 컴포넌트를 자식으로 배치했더니 페이지에 Header를 렌더링했습니다.
이 원리를 파악하기 위해서는 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 />);

코드를 살펴보면 페이지에 헨더링하는 컴포넌트는 App 하나뿐입니다.
따라서 새로운 컴포넌트를 페이지에 렌더링하려면 컴포넌트를 App의 자식으로 배치해야 합니다.
리액트에서 부모는 자식 컴포넌트의 모든 HTML을 함께 반환합니다.

컴포넌트별로 파일 분리하기 🔧

하나의 파일에 여러 컴포넌트를 만들면 코드의 가독성이 떨어지기 때문에 리액트에서는 보통 하나의 파일에 하나의 컴포넌트를 만듭니다.

1. 컴포넌트를 넣어둘 폴더를 만듭니다.
   
   
   
2. 컴포넌트 파일을 폴더 내부에 생성합니다.
   
   
   
3. Header.js 수정

function Header(){
    return(
      <header>
      <h1>header</h1>
      </header>
    );
  }

export default Header;

4. App.js 수정

import './App.css';
import Header from "./component/Header"

function App() {
  return (
  <div className="App">
    <Header />
  </div>
  );
}

export default App;