StaticRouting(정적 라우팅), DynamicRouting(동적 라우팅)

StaticRouting(정적 라우팅)

static routing은 주소창에 사용자가 수동으로 주소입력해서 들어가는 방법이다.
예시로 게시물들이 있다면

board/1 => 1번 게시글 상세보기
board/2 => 2번 게시글 상세보기
board/3 => 3번 게시글 상세보기
board/4 => 4번 게시글 상세보기
.
.
.
board/10 => 10번 게시글 상세보기

이런식으로 사용자가 직접 타자를 해서 수동으로 들어가는 방법이다.

---

DynamicRouting(동적 라우팅)

위에 static Routing은 치명적인 단점이 있다. 만약 게시글 상세히 보기가 몇백개가 있다 라고 가정을 한다면 우리는 그 갯수만큼 페이지를 만들고 손으로 타자를 치면서 들어가야 한다.
동적라우팅은 이러한 부분들을 쉽게 할 수 있도록 도와준다.

import { useMutation, gql } from "@apollo/client"
import { useRouter } from "next/router"
import { useState } from "react"

const CREATE_PRODUCT = gql`
    mutation createProduct($seller: String, $createProductInput: CreateProductInput!) {
        createProduct(seller: $seller, createProductInput:$createProductInput) {
            _id
            number
            message
        }
    }
`


export default function ProductPage() {

    const router = useRouter()

    const[createProduct] = useMutation(CREATE_PRODUCT)
    
    const[seller, setSeller] = useState("")
    const[name, setName] = useState("")
    const[detail, setDetail] = useState("")
    const[price, setPrice] = useState("")

    function onChangeSeller (e) {
        setSeller(e.target.value)
    }

    function onChangeName (e) {
        setName(e.target.value)
    }

    function onChangeDetail (e) {
        setDetail(e.target.value)
    }

    function onChangePrice (e) {
        setPrice(Number(e.target.value))
    }

    async function onClickCreateProduct () {
        
        try{
            const result = await createProduct({
                variables:{
                    seller,
                    createProductInput: {
                        name,
                        detail,
                        price
                    }
                }
            })
            alert("상품이 등록되었습니다.")
            router.push(`/05-day/product-routed/${result.data.createProduct._id}`)
        } catch (e) {
            alert(e.message)
        }
           
       

        }


    return(
       <div>
        판매자: <input onChange={onChangeSeller}/><br /><br />
        상품명: <input onChange={onChangeName}/><br /><br />
        상품내용: <input onChange={onChangeDetail}/><br /><br />
        가격: <input onChange={onChangePrice}/><br /><br />
        <button onClick={onClickCreateProduct}>상품등록하기</button>
       </div>
    )
}

위 예시에서 useRouter를 상수 router 할당하고 push메소드를 통해서 원하는 url로 이동을 시켜준다. 이때 주의해하는 점은 이동시키고자 하는 페이지의 폴더이름을 []로 감싸주어야 한다. 그러면 라우터 push를 했을 때 그 폴더 안에 페이지로 들어가 진다.

이러한 동적라우팅을 사용한다면 게시글 상세페이지가 몇가 필요하든 한개의 페이지를 통해서 많은 페이지들을 보여줄 수 있다.