Layout Component와 React에서 사용하는 이유

이 블로그 게시물은 React 구성 요소를 탐색하는 일련의 게시물을 시작합니다. 개발자가 응용 프로그램을 시작할 때 어떤 구성 요소와 용도를 결정해야 합니다.

이 블로그 게시물에서는 모든 애플리케이션에서 매우 유용한 구성 요소인 레이아웃 구성 요소를 살펴보겠습니다.

레이아웃 구성 요소의 목적

이 구성 요소는 이름에서 알 수 있듯이 애플리케이션의 레이아웃을 정의합니다. 단순히 children를 props로 받아들이고 함께 또는 다른 자식 구성 요소 없이 DOM에 렌더링합니다.

다음과 같이 별도의 폴더에서 프로젝트의 다른 구성 요소와 분리하는 것이 좋습니다.

레이아웃 구성 요소의 사용

Layout 폴더에서 Layout.js 파일을 만들고 거기에 레이아웃 구성 요소의 코드를 저장합니다.

import React from 'react';

const Layout =({children}) =>{
    return(
        <>
        <div>
            <ToolBar/>
            <Sides/>
            <Backdrop/>
        </div>
        <main>{children}</main>
        </>
    )
}

export default Layout;

기본 App.js 파일에서 레이아웃을 가져오고 애플리케이션을 래핑합니다.

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

function App() {
  return (
    <>
      <Layout>
        <p>Test</p>
      </Layout>
    <>
  );
}

export default App;

따라서 레이아웃 로직을 구성 요소로 분리했으며 나중에 레이아웃을 변경하려는 경우 구성 요소 하나만 변경하면 간단하게 수행할 수 있습니다.

재사용 가능한 레이아웃 구성요소

레이아웃 구성 요소는 매우 간단하기 때문에 개발자가 동일한 페이지 레이아웃을 사용하려는 애플리케이션의 다른 부분에서 재사용할 수 있습니다. 또한 다음과 같이 FlexBox 또는 Grid 속성을 사용하는 재사용 가능한 사용자 정의 레이아웃을 생성할 수 있습니다.

<Flexbox vertical gap={3}>
  <Flexbox noGrow>
    <h1>A Title for You</h1>
  </Flexbox>
  <Flexbox bottom>
    <p>Your cool paragraph.</p>
  </Flexbox>
</Flexbox>

재사용 가능한 레이아웃으로 작업하는 것은 코드를 한 번 작성하고 애플리케이션의 많은 부분에서 사용할 수 있기 때문에 매우 좋은 방법입니다.

다음은 응용 프로그램을 구축하는 동안 사용할 수 있는 재사용 가능한 레이아웃 구성 요소 중 일부입니다.

1. 그리드 레이아웃 반응 - demo 및 code
2. React Flexbox 그리드 - code
3. React Material-UI 그리드 - source
4. 그로밋 그리드 레이아웃 - source
5. React Bootstrap/Reactstrap 그리드 레이아웃 - source
6. 자동 응답 반응 - code
7. 반응 스택 그리드 - demo 및 code
8. 헤드론 - code
9. 그리드 시스템 반응 - code
10. Rebass React 그리드 - code
11. Semantic-UI React 그리드 - source
12. 반사 상자 - code

제 블로그를 읽어주셔서 감사합니다. 부담없이 접속하거나 :)