[Next js] Next의 Dynamic Routing과 Link 컴포넌트를 이용해서 아주 간단한 게시판 만들기.

이번 시간에는 Next JS 의 Dynamic Routing 을 이용해서 게시판을 만들어 볼 것이다.

 

이번 글에서는 이론적인 이야기 보다 좀 더 실용적인 이야기를 하려고 한다.

 

만약 다이나믹 라우팅에 대해서 알지 못하거나 한글로 정리된 글을 보고싶다면 이곳에서 확인할 수 있으며 Link 컴포넌트에 대해서는 이곳에 정리를 해놨으니 한 번 가볍게 읽고 시작하는 것을 추천한다.

---

이번 시간에는 Dynamic Routing과 Link를 이용해서 간단한 게시판을 만들어볼 것이다.

 

가장 중요한 목적은 바로 Dynamic Routing과 Link 컴포넌트를 이옹하는 것 이다.

 

그렇기 때문에 로그인이나 Express, Node, DB와 같이 고급 기술 그리고 쉬운 디자인적 요소도 하나도 사용하지 않고 라우팅을 중점적으로 확인할 것이다.

Directory 구조

디렉토리 구조는 라우팅을 할 pages 디렉토리 아래에 post/[id] 라는 디렉토리를 만들고 해당 디렉토리에 comment 컴포넌트를 추가시킬 것이다.

 

• pages : 라우팅을 할 파일을 모아놓는 디렉토리
• components : Navigation bar 역할을 수행할 <Header> 컴포넌트를 갖는 디렉토리

File 구조

• pages/index.jsx => localhost:3000/ 과 매핑될 jsx 파일
• pages/about.jsx => localhost:3000/about 과 매핑될 jsx 파일
• pages/post/[id]/index.jsx => localhost:3000/post 와 매핑될 jsx 파일
• pages/post/[id]/[comment].jsx => localhost:3000/post/1/first-comment 과 매핑될 jsx 파일

---

components/Header.jsx

import React from "react";
import Link from "next/link";
const Header = () => {
  return (
    <header>
      <ul>
        <li>
          <Link href="/">
            <a>home</a>
          </Link>
        </li>
      </ul>
      <ul>
        <li>
          <Link href="/about">
            <a>About</a>
          </Link>
        </li>
      </ul>
      <ul>
        <li>
          <Link href="/post/[id]" as="/post/first">
            <a>First Post</a>
          </Link>
        </li>
      </ul>
      <ul>
        <li>
          <Link href="/post/[id]" as="/post/second">
            <a>Second Post</a>
          </Link>
        </li>
      </ul>
    </header>
  );
};

export default Header;

Components 에서 모든 페이지가 갖게될 Header 컴포넌트를 만든다.

Header 컴포넌트는 상단 네비게이션 바와 같은 역할을 할 것인데, 여기서 주목해야 할 것은 바로
<Link href="/post/[id]" as=""> 에서 as의 역할이다.

• as Props는 공식 홈페이지에 따르면 브라우저 URL 표시줄에 표시될 경로에 대한 선택적 decorator. 이라고 하는데, 우리는 여기서 as 프롭스를 이용해서 해당 Link 를 클릭하면 어떤 url로 이동시킬지 명시해줄 것이다.

pages/index.jsx

import Link from "next/link";
import Header from "../components/Header";

function Home() {
  return (
    <>
      <Header />
      <h1>About page</h1>
    </>
  );
}

export default Home;

이제 실질적으로 localhost:3000/으로 들어갔을 때 라우팅을 할 컴포넌트를 만들어보자.
pages 안에 index.js는 default 경로를 나타낸다.

pages/about.jsx

import React from "react";

const about = () => {
  return <div>this is about</div>;
};

export default about;

about.jsx는 동적 라우팅과 별개로 일반적인 라우팅을 위해 추가하였다.

pages/post/[id]/index.jsx

import { useRouter } from "next/router";
import Link from "next/link";
import Header from "../../../components/header";

const Post = () => {
  const router = useRouter();
  const { id } = router.query;

  return (
    <>
      <Header />
      <h1>Post: {id}</h1>
      <ul>
        <li>
          <Link href="/post/[id]/[comment]" as={`/post/${id}/first-comment`}>
            <a>First comment</a>
          </Link>
        </li>
        <li>
          <Link href="/post/[id]/[comment]" as={`/post/${id}/second-comment`}>
            <a>Second comment</a>
          </Link>
        </li>
      </ul>
    </>
  );
};

export default Post;

아까 봤듯이 components/Header.jsx에서 as 프롭스로 어떤 곳으로 갈지 지정해 준 결과를 보여줄 컴포넌트이다.
여기서도 댓글들을 as프롭스로 연결시켜보자.

pages/post/[id]/[comment]/.jsx

import { useRouter } from "next/router";
import Header from "../../../components/header";
const Comment = () => {
  const router = useRouter();
  const { id, comment } = router.query;

  return (
    <>
      <h1>Post: {id}</h1>
      <h1>Comment: {comment}</h1>
    </>
  );
};

export default Comment;

위와 같은 과정의 연속이다.

---

오늘은 어떤 방식으로 페이지를 링크하며 동적으로 라우팅을 하는지에 대해서 알아보았다.