[React] Layout 만들기

Header, Footer, Nav 등의 컴포넌트를 한번에 적용하기 위해 Layout을 만들어두면 편리하게 사용할 수 있다.

 

components 폴더안에 Layout 폴더를 만들고, Layout.tsx를 생성한 뒤에

 

import React from "react"

const Layout = (props:{

children:React.ReactNode

}) =>{

return (

<div>

{/* <Header/> */}

<main>

{props.children}

</main>

{/* <Footer/> */}

</div>

)

}

export default Layout

 

 

한 뒤에 위와 같이 children을 props로 받아 레이아웃을 만들어준다.

이후 Layout을 import하여 컴포넌트를 감싸주면 적용된다.