GatsbyJS에서 페이지 생성 및 라우팅 관리하기

GatsbyJS에서 페이지 생성 및 라우팅 관리하기

GatsbyJS는 정적 페이지를 자동으로 생성하는 강력한 라우팅 시스템을 제공합니다.
이번 글에서는 Gatsby에서 페이지를 만드는 방법과 동적 페이지를 생성하는 방법을 단계별로 설명하겠습니다.

---

1. Gatsby에서 페이지를 생성하는 기본 개념

Gatsby에서는 src/pages/ 폴더에 .js 또는 .tsx 파일을 생성하면 자동으로 해당 경로에 페이지가 생성됩니다.

• 파일 기반 라우팅: src/pages/index.js → http://localhost:8000/
• 자동 URL 매핑: src/pages/about.js → http://localhost:8000/about
• 레이아웃 공유 가능: 여러 페이지에서 공통 레이아웃 사용 가능

🚀 즉, Gatsby에서는 src/pages/ 안에 파일을 추가하는 것만으로도 페이지를 쉽게 만들 수 있습니다.

---

2. 기본 정적 페이지 생성

✅ 홈페이지 (index.js) 생성

1. src/pages/index.js 파일을 열고 아래 코드를 추가합니다.

import React from "react";

const HomePage = () => {
  return (
    <main>
      <h1>Welcome to Gatsby!</h1>
      <p>이 사이트는 GatsbyJS로 만들어졌습니다.</p>
    </main>
  );
};

export default HomePage;

1. 개발 서버를 실행한 후 (gatsby develop), 브라우저에서 http://localhost:8000/에 접속하면 위 내용이 보입니다. 🚀

---

3. 새로운 페이지 추가 및 자동 라우팅

반응형

✅ About 페이지 (about.js) 추가

1. src/pages/about.js 파일을 생성하고 아래 코드를 추가합니다.

import React from "react";

const AboutPage = () => {
  return (
    <main>
      <h1>About Us</h1>
      <p>이 페이지는 Gatsby의 정적 페이지 예제입니다.</p>
    </main>
  );
};

export default AboutPage;

1. 브라우저에서 http://localhost:8000/about에 접속하면 About Us 페이지가 정상적으로 표시됩니다. 🚀

💡 자동 라우팅: Gatsby에서는 src/pages/ 폴더에 있는 모든 파일이 자동으로 URL 경로와 연결됩니다.

---

4. Gatsby에서 링크(Navigation) 추가하기

Gatsby는 내부 링크를 최적화하기 위해 gatsby-link 패키지를 제공합니다.
✅ Gatsby의 Link 컴포넌트를 사용하면 페이지 간 빠르게 이동 가능합니다.

✅ 홈페이지에 About 페이지로 이동하는 링크 추가

import React from "react";
import { Link } from "gatsby";

const HomePage = () => {
  return (
    <main>
      <h1>Welcome to Gatsby!</h1>
      <p>이 사이트는 GatsbyJS로 만들어졌습니다.</p>
      <Link to="/about">About 페이지로 이동</Link>
    </main>
  );
};

export default HomePage;

🚀 Link를 사용하면 Gatsby의 프리페칭 기능을 활용하여 더 빠르게 페이지를 로딩할 수 있습니다.
✔️ <a href="..."> 대신 <Link to="..."> 사용하면 성능 최적화 가능

---

5. Gatsby에서 레이아웃(Layout) 적용하기

Gatsby에서는 모든 페이지에 적용할 공통 레이아웃을 쉽게 만들 수 있습니다.
이를 위해 레이아웃 컴포넌트를 생성하여 여러 페이지에서 공유할 수 있습니다.

✅ 공통 레이아웃(layout.js) 만들기

1. src/components/layout.js 파일을 생성하고 아래 코드를 추가합니다.

import React from "react";
import { Link } from "gatsby";

const Layout = ({ children }) => {
  return (
    <div>
      <nav>
        <Link to="/">홈</Link> | <Link to="/about">소개</Link>
      </nav>
      <main>{children}</main>
      <footer>© 2024 My Gatsby Site</footer>
    </div>
  );
};

export default Layout;

1. 기존 index.js와 about.js에서 레이아웃을 적용합니다.

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

const HomePage = () => {
  return (
    <Layout>
      <h1>Welcome to Gatsby!</h1>
      <p>이 사이트는 GatsbyJS로 만들어졌습니다.</p>
    </Layout>
  );
};

export default HomePage;

🚀 이제 모든 페이지에서 공통 네비게이션과 푸터가 적용됩니다.

---

6. Gatsby에서 동적 페이지 생성 (Programmatic Page Creation)

Gatsby에서는 gatsby-node.js 파일을 사용하여 동적으로 페이지를 생성할 수 있습니다.
이 방법은 블로그 포스트, 제품 목록, 데이터 기반 페이지 등에 유용합니다.

✅ Markdown 파일을 기반으로 동적 블로그 페이지 생성

1. gatsby-node.js 파일을 열고 다음 코드를 추가합니다.

const path = require("path");

exports.createPages = async ({ actions }) => {
  const { createPage } = actions;

  const blogTemplate = path.resolve("src/templates/blog-template.js");

  const blogPosts = [
    { slug: "first-post", title: "첫 번째 블로그 글" },
    { slug: "second-post", title: "두 번째 블로그 글" },
  ];

  blogPosts.forEach((post) => {
    createPage({
      path: `/blog/${post.slug}`,
      component: blogTemplate,
      context: { title: post.title },
    });
  });
};

✅ 설명

• createPages 함수를 사용하여 /blog/{slug} 경로에 페이지를 동적으로 생성
• context를 통해 템플릿에 데이터를 전달

1. src/templates/blog-template.js 파일을 생성하고 아래 코드를 추가합니다.

import React from "react";

const BlogTemplate = ({ pageContext }) => {
  return (
    <main>
      <h1>{pageContext.title}</h1>
      <p>이것은 동적으로 생성된 블로그 포스트입니다.</p>
    </main>
  );
};

export default BlogTemplate;

🚀 이제 http://localhost:8000/blog/first-post에 접속하면 동적으로 생성된 블로그 페이지를 확인할 수 있습니다!

---

7. 결론

이번 글에서는 Gatsby에서 정적 페이지를 생성하는 방법과 동적 페이지를 추가하는 방법을 배웠습니다.
✔ src/pages/ 폴더에 파일을 추가하면 자동으로 페이지가 생성됨
✔ Gatsby의 Link를 사용하여 페이지 간 빠르게 이동 가능
✔ gatsby-node.js를 활용하면 동적 페이지를 쉽게 생성 가능

🚀 다음 글에서는 Gatsby에서 GraphQL을 활용하여 데이터를 쿼리하는 방법을 다뤄보겠습니다!