Component

• UI를 독립적이고 재사용 가능한 일부분으로 분할하고 다루는 문법
• 일반적으로 하나의 페이지 또는 재활용성을 위한 컴포넌트로 구성
• 컴포넌트명은 Capitalize + 카멜기법으로 작성
• 일반적으로 컴포넌트는 파일 단위로 나누어 작성

// 사용할 자식 컴포넌트
import Header from "./components/Header.jsx";
import Footer from "./components/Footer.jsx";
import './App.css'

function App() {
  return (
    <>
	    {/* import한 컴포넌트 사용하기*/}
      <Header></Header>
      <main>   
         
      </main>
      <Footer></Footer>
    </>
  );
}

export default App;

부모 컴포넌트

import './Header.css';

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

export default Header;

import './Footer.css';

function Footer () {
  return (
    <footer>
      <p>ⓒ Tteok-twi-soon.</p>
    </footer>
  );
}

export default Footer;

자식 컴포넌트

Component 분리 기준

• 반복해서 사용해야하는 UI
• 리렌더링 효율을 위해 내용의 변경이 매우 잦을 것으로 예상되는 UI
• 페이지 단위의 UI
• 팀원과 협업을 할 때 작업을 Component 단위로 분해하기도 함

• index.html
• App
• Header
• Main
• Footer