레이아웃 구성 요소를 만드는 방법: React

create-react-app을 사용하여 React 앱 만들기

npx create-react-app react-layout-demo
cd react-layout-demo
npm start

레이아웃 구성 요소 만들기

You can choose either class component or functional component that works best for you 😄

const Layout = () => {
  return (
    <div>Layout</div>
  )
}

export default Layout

구성 요소를 레이아웃 구성 요소로 만들기

const Layout = ({ children }) => {
  return <div>{children}</div>
}

export default Layout

레이아웃에 탐색 및 바닥글 추가.

Footer.js

레이아웃 구성요소에 탐색 및 바닥글을 추가하려면 Layout.js를 다음으로 업데이트합니다.

import Navigation from './Navigation'
import Footer from './Footer'

const Layout = ({ children }) => {
  return (
    <>
      <Navigation />
      <main>{children}</main>
      <Footer />
    </>
  )
}

export default Layout

import NavigationBar from '../components/NavigationBar'
import Footer from '../components/Footer'

const Layout = ({children}) => {
 return (
  <div>
    <NavigationBar />
    <Footer />
  </div>
 )
}

레이아웃 구성 요소 사용

구성 요소를 필요한 페이지로 가져옵니다. 즉

import Layout from '../layout/Layout'

const AboutPage = () => {

return (
  <Layout>
    //page content
  </Layout>
)

}

구성 요소의 모든 콘텐츠가 <Layout></Layout> 안에 래핑되었는지 확인합니다.

결론

이 게시물에서는 React에서 레이아웃 구성 요소를 만드는 단계를 다루었습니다.

코드샌드박스

<iframe src="https://codesandbox.io/embed/gifted-orla-hjpx0v"style="너비:100%; 높이:calc(300px + 8vw); 테두리:0; 테두리 반경: 4px ; 오버플로:숨김;"allow="위치 정보; 마이크; 카메라; 미디; vr; 가속도계; 자이로스코프; 지불; 주변광 센서; 암호화된 미디어; usb"로딩="게으른"sandbox="allow-modals 허용 양식 허용 팝업 허용- 스크립트 허용-동일 출처">
</iframe>