게임모드공유웹 <ModHub> 제작기 - 레이아웃 구획하기

components 폴더에 layout 폴더를 생성하고 Footer, Header, Layout jsx파일과 css파일을 생성했다.

• components/
  └── layout/
  ├── Footer.jsx
  ├── Footer.css
  ├── Header.jsx
  ├── Header.css
  ├── Layout.jsx
  └── Layout.css

Layout.jsx

import React from "react";
import "./layout.css";
import Footer from "./Footer";
import Header from "./Header";

const Layout = () => {
    return (
    <div className="layout">
        <Header />
        <main className="main">
            <h3>이곳은 레이아웃 영역입니다.</h3>
        </main>
        <Footer />
            </div>
    )
}

export default Layout

Header.jsx

import React from "react";
import "./header.css";

const Header = () => {
    return (
        <header className="header">
            <div>
                <h2>이 부분은 헤더입니다.</h2>
            </div>
        </header>
    )
}

export default Header

Footer.jsx

import React from "react";
import "./footer.css";

const Footer = () => {
    return (
        <footer className="footer">
            <div>
                <h2>이 부분은 푸터입니다.</h2>
            </div>
        </footer>
    )
}

export default Footer

App.jsx(임시)

import React from "react";
import Layout from "./components/layout/Layout"

function App() {
  return (
    <Layout />
  );
}
export default App;

CSS를 설정한 뒤, App.jsx를 수정해 정상적으로 작동하는지 확인.

눈이 좀 아프긴한데 잘 적용되는 모습이다.