Learn Static, Dynamic Routing

라우터 객체와 라우팅

라우터 객체 : 페이지 이동과 관련된 기능을 가지고 있는 객체
A 페이지 -> B 페이지 : "B페이지로 라우팅한다"
const router = useRouter()
router.push("이동할 페이지")

자주 사용하는 라우터 객체 기능

export default function Routing() {
    const handleClickPathname = () => {
        const pathname = Router.pathname
        alert(pathname)
    }

    const handleClickAsPath = () => {
        const asPath = Router.asPath
        alert(asPath)
    }

    const handleClickBack = () => {
        Router.back()
    }

    const handleClickPush = () => {
        Router.push('/')
    }

    const handleClickReload = () => {
        Router.reload()
    }

    const handleClickReplace = () => {
        Router.replace('/')
    }


    return (
      <>
        <button onClick={handleClickPathname}>현재 위치 주소: Router.pathname</button><br/>
        <button onClick={handleClickAsPath}>현재 위치 주소: Router.asPath</button><br/>
        <button onClick={handleClickBack}>뒤로가기 버튼: Router.back()</button><br/>
        <button onClick={handleClickPush}>현재 페이지에서, 다른 페이지로 이동: Router.push()</button><br/>
        <button onClick={handleClickReload}>새로고침: Router.reload()</button><br/>
        <button onClick={handleClickReplace}>현재 페이지 삭제 후, 다른 페이지로 이동: Router.replace()</button><br/>
      </>
    )
  }

정적 라우팅

/login 페이지는 항상 로그인 페이지가 나옴
localhost3000/boards/1
이런 페이지로 이동 : 정적 라우팅

동적 라우팅

게시판 상세보기같은 경우, 글 번호에 따라 주소 변경
/board/1, /board/100 : 동적 라우팅

next.js에서 동적 라우팅 제공
보여주고자 하는 폴더의 하위 폴더로 [boardId]폴더 만들어준 후
이 안에 index.js 파일 만들어주면 동적 라우팅 사용 가능

대괄호로 감싸준 폴더를 만들어주면 이동해주고자 하는 페이지 번호, 혹은 게시글 번호가 대괄호 안에 쓰여진 변수명에 담겨 그 변수 안에 있는 데이터를 꺼내 조회할 수 있다.(대괄호 안에 쓰여지는 폴더 이름은 단순한 변수명)
대괄호 - 주소로 보지 않겠다. 변수로 보겠다.
/boards/170 -> 170은 []안의 변수에 저장, []폴더의 index.js에 이동하게 됨 []폴더에 index.js를 한개만 만들어 놓고 1이면 1번 게시물 5면 5번 게시물 이렇게 넘어가게 된다.
=> 이 과정을 돕는 것 : 라우터 객체

router.query = {boardId: 1} 자동으로 게시글 번호 꺼내올 수 있다.

다이나믹 라우팅 리뷰

대괄호가 있는 [폴더] = 다이나믹 라우팅 폴더,
대괄호가 없는 폴더 = 정적 라우팅 폴더

💡다이나믹 라우팅시 주의점
-> 다이나믹 라우팅 폴더에 들어갈 때 url 입력 /boards/qqq,
qqq부분에는 게시글 아이디의 어떤 값을 넣어도 boardId 페이지에 접속됐다.
하지만 qqq부분에 new를 넣게 되면 boardId가 아닌 new폴더의 index.js 파일에 접속하게 된다.

💡다이나믹 폴더의 boardId 정보를 가지고 오고 싶을 때
-> 다이나믹 폴더의 파라미터(boardId)는 router.query에서 찾아볼 수 있다.
query까지만 입력하면 boardId뿐만 아니라 다양한 정보를 얻을 수 있다.
query는 dynamic router의 파라미터를 포함한 조회가 가능한 정보를 담은 객체.