📖 React 컴포넌트 만들고 출력하기

• 먼저 ! src 폴더 안에 components 폴더를 생성한다.
• components 안에는 기본적인 Header, Main, Footer를 만들 건데 확장자는 jsx이다.
• 그러고 각 component 안에 코드를 작성하고 return한 값을 내보내주고
• 그걸 App.jsx에서 불러와 출력시키면 된다!

---

1. components 폴더 생성 및 component 생성

---

2. 각각의 component 안에 코드 작성

const 컴포넌트명 = () =>{
	return 반환할 값;
};

export default 컴포넌트명; ➡️ 컴포넌트를 내보내기위한 코드

📍 컴포넌트명의 앞글자는 대문자로 시작해야한다.(소문자로 시작하면 컴포넌트로 인식하지 않는다.)

2-1. Header.jsx

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

export default Header;

2-2. Main.jsx

const Main = () => {
  return (
    <main>
      <h1>main</h1>
    </main>
  );
};

export default Main;

2-3. Footer.jsx

const Footer = () => {
  return (
    <footer>
      <h1>Footer</h1>
    </footer>
  );
};

export default Footer;

---

3. App.jsx에 가져와 출력하기

3-1. 작성한 컴포넌트 각각 import 하기

import 컴포넌트명 from "컴포넌트가 위치한 경로";

3-2. App() 안에 컴포넌트 불러오기

import Header from "./components/Header";
import Main from "./components/main";
import Footer from "./components/Footer";

function App(){
	return (
    	<>
        	<Header />
            <Main />
            <Footer />
    	</>
    );
}

3-3. 결과