[리액트][타입스크립트] React 레이아웃 컴포넌트 만들기(props)

결과 화면

 

---

1. 레이아웃 컴포넌트 만들기

• src/components/layouts/Header.tsx

const Header = () => {
  return (
    <>
      <header>헤더 컴포넌트입니다.</header>
    </>
  )
}

export default Header

 

• src/components/layouts/Footer.tsx

const Footer = () => {
  return (
    <>
      <footer>푸터 컴포넌트입니다.</footer>
    </>
  )
}

export default Footer

 

• src/components/layouts/Layout.tsx

헤더와 푸터는 페이지마다 공통으로 보여지는 영역이기 때문에 import 해서 사용하면 되지만,

메인의 컨텐츠 영역은 페이지마다 내용이 바뀌기 때문에 props로 사용한다.

import Header from './Header'
import Footer from './Footer'

const Layout = (props: {children: React.ReactNode}) => {
  return (
    <>
      <Header/>

      <main>{props.children}</main>

      <Footer/>
    </>
  )
}

export default Layout

 

2. index.tsx, App.tsx 수정하기

• src/index.tsx

불필요한 소스를 삭제한다.

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
)

root.render(
  <React.StrictMode>
    <App/>
  </React.StrictMode>
)

 

• src/App.tsx

레이아웃 컴포넌트를 import 한다.

<h1>의 내용이 <Layout> 컴포넌트의 <main> 태그 안에 들어가게 된다.

<Layout> 컴포넌트로 감싸 여러 페이지들을 만들면 된다.

import React from 'react'
import Layout from './components/layouts/Layout'
import './App.css'

const App = () => {
  return (
    <Layout>
      <h1>내용을 작성해 주세요.</h1>
    </Layout>
  )
}

export default App