Next js 튜토리얼 4편 : 동적 페이지

목차

Next js 튜토리얼 1편: 시작하기

Next js 튜토리얼 2편 : 페이지 이동 

Next js 튜토리얼 3편 : 공통 컴포넌트 사용

Next js 튜토리얼 4편 : 동적 페이지  - 현재 글

Next js 튜토리얼 5편 : 동적 라우팅  

Next js 튜토리얼 6편 : 데이터 가져오기  

Next js 튜토리얼 7편 : 컴포넌트 스타일링  

Next js 튜토리얼 8편 : 배포

Create Dynamic Pages

여러 페이지로 기본적인 next.js 앱을 만드는 방법을 알게 되었습니다. 그러나 실제 앱에는 동적 컨텐츠를 표시하기 위해 페이지를 동적으로 만들어야 합니다. next.js에는 여러 가지 방식이 있습니다

이번장에서는 query strings를 이용해 간단한 블로그 앱을 만들어 봅시다.

Setup

다음 예제를 다운로드 해주세요

git clone https://github.com/zeit/next-learn-demo.git

cd next-learn-demo

cd 3-create-dynamic-pages

npm install

npm run dev

http://localhost:3000 로 접속합니다

Adding a list of posts

우선, 포스트 목록을 home 페이지에 추가합니다. 아래의 내용을 'pages/index.js'에 넣어주세요

import Layout from '../components/MyLayout'

import Link from 'next/link'

const PostLink = props => (

  <li>

    <Link href={`/post?title=${props.title}`}>

      <a>{props.title}</a>

    </Link>

  </li>

)

export default function Blog() {

  return (

    <Layout>

      <h1>My Blog</h1>

      <ul>

        <PostLink title="Hello Next.js" />

        <PostLink title="Learn Next.js is awesome" />

        <PostLink title="Deploy apps with Zeit" />

      </ul>

    </Layout>

  )

}

저장 후 확인해 보면 3개의 링크가 생긴 home화면을 볼 수 있습니다

 *firefox는 링크 리스트가 'Hello Next.js'가 아닌 'Hello%20Next.js' 나올수도 있습니다

링크를 클릭하면 404page가 나오지만 아직 page를 생성하지 않았기 때문에 정상입니다. 

첫번째 링크를 클릭했을 때 URL을 확인 했을 때 '/post?title=Hello%20Next.js'이라고 뜨면 됩니다

Passing Data via Query Strings

url에서 확인 할 수 있듯이 query string을 통해 데이터를 전달 합니다. 지금 같은 경우에는 title이 query의 매개 변수 입니다. 위 코드 에서 PostLink컴포넌트로 query를 전달 했습니다.

PoskLink 컴포넌트안에 Link컴포넌트에서 href로 props를 내려주었습니다. 이처럼 query string을 통해 원하는 데이터를 전달 할 수 있습니다

Create the 'post' page

이제 블로그 게시물을 표시하기 위해 게시물 페이지를 만들어야 합니다. 그렇게 하기 위해서는 query string에서 title을 가지고 와야합니다.

'pages/post.js'파일을 생성하고 아래의 내용을 넣어주세요

import { useRouter } from 'next/router'

import Layout from '../components/MyLayout'

const Page = () => {

  const router = useRouter()

  return (

    <Layout>

      <h1>{router.query.title}</h1>

      <p>This is the blog post content.</p>

    </Layout>

  )

}

export default Page

저장 후 브라우저에서 확인을 해보면 query에서 title의 값이 출력되는 것을 볼 수 있습니다.

useRouter를 통해 Next.js의 'router' 객체를 변수에 담았습니다.

그 후, router 객체 안의 query에서 필요한 값인 title의 값을 가지고 올 수 있었습니다.

useRouter

위에서 확인 했듯이 userRouter를 통해 router 객체에 접근하여 페이지에 값을 넣을 수 있었습니다. 이는 React Hook과 함수형 컴포넌트에서도 사용할 수 있습니다

import { useRouter } from 'next/router'

import Layout from '../components/MyLayout.js'

const Content = () => {

  const router = useRouter()

  return (

    <>

      <h1>{router.query.title}</h1>

      <p>This is the blog post content.</p>

    </>

  )

}

const Page = () => (

  <Layout>

    <Content />

  </Layout>

)

export default Page

Finally

이번 장에서는 query string을 이용하여 동적 페이지를 만드는 방법에 대해 알아보았습니다. 

동적 페이지를 렌더링할 때에는 더 많은 정보가 필요할 수도 있고, query string만으로는 불가능 할 수도 있습니다. 또한 우리는 http://localhost:3000/blog/hello-nextjs 와 같이 깨끗한 URL을 만든고 싶습니다.

다음 수업에서는 이런 문제를 해결할 수 있는 방법을 배워봅시다. 그러기 위해서는 이번 장에 대해서 이해를 하고 있어야 합니다.

---

Next js 튜토리얼 1편: 시작하기

Next js 튜토리얼 2편 : 페이지 이동 

Next js 튜토리얼 3편 : 공통 컴포넌트 사용

Next js 튜토리얼 4편 : 동적 페이지  - 현재 글

Next js 튜토리얼 5편 : 동적 라우팅  

Next js 튜토리얼 6편 : 데이터 가져오기  

Next js 튜토리얼 7편 : 컴포넌트 스타일링  

Next js 튜토리얼 8편 : 배포