ProgrammingFrontendReact

[Gatsby] Layout Components

, , , ,

Layout Components

Gatsby는 기본적으로 레이아웃을 페이지에 자동으로 적용하지 않습니다. 대신 Layout Component를 사용하면 Header 및 Footer, 그리고 일부 페이지에서 사용하는 사이드바와 같은 여러 가지 레이아웃을 만들 수 있습니다. 또한 레이아웃과 페이지 컴포넌트 간에 데이터를 전달할 수 있습니다.

즉, Layout Component를 사용하여 여러 페이지에서 일반적으로 사용하는 Header 및 Footer의 레이아웃을 공유하도록 구성할 수 있습니다.

예제

src/components/ 디렉터리를 생성하고 Layout.tsx 파일을 생성합니다.
다음과 같이 Gatsby 의 Link를 사용하여 페이지를 이동하는 Layout Component를 구성합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// src/components/Layout.tsx
import { Link } from 'gatsby';
import React from 'react';

interface ILayoutProps {
  children: any;
}

export default function Layout({ children }: ILayoutProps) {
  return (
    <div>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/blog">Blog</Link>
          </li>
        </ul>
      </nav>
      <main>{children}</main>
    </div>
  );
}

페이지에 레이아웃을 적용하려면 Layout Component 를 포함하고 그 안에 페이지 내용을 넣어야 합니다.
레이아웃을 페이지에 적용하는 방법은 다음과 같습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
// src/pages/index.tsx
import * as React from 'react';
import Layout from '../components/Layout';

export default IndexPage = () => {
  return (
    <Layout>
      <div>
        <h1>Welcome to Home</h1>
      </div>
    </Layout>
  );
};

이 레이아웃이 필요한 모든 페이지와 템플릿에 대해 반복을 합니다.

참고

Share