Static Routing / Dynamic Routing

quin1392·2022년 5월 16일
0

페이지에서 다른 페이지로 넘어갈 때 필요한 기술이 Routing 기술입니다. 라우팅은 크게 두 가지로 분류되는데 하나가 Static 방식이고 다른 하나가 Dynamic 방식입니다.

Static Routing

정적 라우팅은 쉽게 말해 프로그래머가 다음으로 이동할 페이지를 결정지어 준다는 것 입니다. 라우터 객체를 통해서 push를 함으로써 다른 페이지로의 이동을 구현하는데 이동할 페이지를 사용자에 따라서 다른 페이지를 구성하는 것이 아닌 모두가 같은 페이지를 볼 수 있도록 합니다.

구현 방식은 간단합니다. 평소에 페이지를 만드는 것 처럼 만들면 그것이 바로 정적 라우팅을 위한 시작입니다.

import { useRouter } from 'next/router'

const router = useRouter()

router.push(`/next-page`)

이와 같이 코드를 작성하면 "localhost:3000/next-page"로 이동하는 것을 확인할 수 있습니다. 기본적으로 사용자가 이 페이지에 접근할 때 사용자에 따라서 다른 페이지의 모습을 보여주지 않고, 모든 사용자가 같은 페이지를 볼 수 있도록 합니다.

Dynamic Routing

동적 라우팅은 정적 라우팅과는 다르게 페이지의 css와 같은 디자인이나 구성은 같지만, 그 안의 내용이 다르게 구성해야할 필요가 있을 때 사용됩니다. 예를 들어 게시판을 들어갈 때 게시글의 구성이나 css의 위치는 어떤 게시글이나 동일하게 구성되지만 그 안의 내용은 게시글마다 다른 것을 볼 수 있습니다. 이렇게 그 안의 내용을 다르게 구성할 때 동적 라우팅을 사용합니다.

동적라우팅을 위해서는 페이지의 경로를 구성할 때 페이지 이름에 "[ ]"를 적어줍니다. []로 구성된 페이지로 넘어가기 위해서는 서버에 mutation 혹은 query를 보내서 리턴 받은 값을 통해서 []로 구성된 페이지로 이동합니다.

예를 들어 게시글을 작성하여 서버에 등록을 요청하면 서버는 글을 서버의 DB에 저장을 하고 그에 대해서 결과 등의 message나 등록된 글의 id값을 반환해 줄 것입니다. 프로그래머는 반환 받은 id값을 이용해서 글이 등록되면 반환 받은 id값을 가지는 게시글로 바로 이동하도록 프로그램을 만들 것 입니다.

const result = await createBoard({
                variables : {
                    createBoardInput : {
                        writer: writer,
                        password: password,
                        title: title,
                        contents: contents
                    }
                }
            })
            console.log(result)
            router.push(`/board/${result.data.createBoard._id}`)

이렇게 서버에 게시글 등록을 요청하고 요청에 대해 반환같은 _id로 router.push를 진행하여 이동할 수 있도록 합니다. 사용자는 등록된 게시글마다 가지는 고유의 _id 값이 다르기 때문에 모든 사용자가 서로 다른 페이지를 볼 수 있게 됩니다.

0개의 댓글