Routing & Router

쉽게말해 라우팅은 사용자가 요청한 주소에 맞는 페이지를 보여주는 것이고, 라우터는 페이지를 이동할 수 있도록 하는 도구이다. 라우팅에는 정적(static)라우팅과 동적(dynamic)라우팅이 있다.

네트워크적인 개념에서의 라우팅과 라우터
라우팅 -> 경로를 찾아가는 과정
라우터 -> 경로

정적(static)라우팅

정적 라우팅의 경우 이동하는 페이지의 주소를 직접 지정해 주어야 한다.
예를 들어 회원가입 버튼을 눌러 회원가입 페이지(하나만 존재)로 이동하는 경우 회원가입 페이지의 주소를 추가해주면 된다.

정적 라우팅 예시

//next.js에서 useRouter를 import하여 사용한 코드.
//버튼을 누르면 해당 페이지로 넘어갈 수 있도록 구현

import {useRouter} from 'next/router'

export default function StaticRoutingPage() {
    const router = useRouter()

    const onClickMove = () => {
        router.push('페이지 경로')

    }


    return <button onClick={onClickMove}>페이지 이동하기</button>
}

동적(dynamic)라우팅

동적 라우팅의 경우 이동하는 페이지의 주소를 자동으로 지정해 준다.
예를 들어 100명이 넘는 회원 목록에 각각의 회원 페이지를 회원 수에 맞춰 만들고 정적으로 주소를 할당해 페이지가 넘어갈 수 있도록 한다면 코드 작성 측면과 유지보수 측면에서 매우 비효율적이다. 동적 라우팅의 경우 하나의 회원페이지만 만들고 주소값을 변수형태로 저장해 요청하는 데이터의 정보만 바꿔준다.

변수형태로 저장된 주소값을 넣어주기 위해 파일명을 [ ]로 감싸주어야 한다.

동적 라우팅 예시

//next.js에서 useRouter를 import하여 사용한 코드.
import { useRouter } from 'next/router'

const router = useRouter()

,
,
,

router.push(`/boards/detail/${result.data.createBoard._id}`)
//${result.data.createBoard._id}값이 [number]에 할당되는 것이다.

오늘의 집 예시
https://ohou.se/productions/58768/selling
위의 주소에서 58768(상품번호)만 바꿔 입력해주면 다른 상품의 페이지가 뜬다.