1주차 금요일

라우팅

사전정의 : 데이터를 보내기 위해 최적의 경로를 선택하는 과정.(페이지 이동)

정적 라우팅 (Static Routing)

• 경로를 수동으로 일일이 입력하여야 한다

// ex)

import { useRouter } from 'next/router'

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

  const onClickMove = () => {
    router.push("/05-02-static-routed") // 이동할 폴더 명
  }

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

// 버튼을 누르면 /05-02-static-routed로 이동하게 된다

• router.push() 를 이용하여 이동할 수 있게끔 한다

동적 라우팅(Dynamic Routing)

• 정적 라우팅은 각각의 폴더를 생성하여 push로 각각 적용해야하지만
  100개의 게시글이 있을 경우엔 동적 라우팅을 통해 쉽게 효율적으로 적용 가능하다.
• 정적 라우팅 같은 경우 폴더 안에 하위폴더 명을 1, 2, 3 등의 각각의 폴더를 만들어야 했지만 동적 라우팅은 폴더안에 하위폴더 명을[](대괄호)로 표시함(변수명)
• []로 생성된 폴더 안 index.js 하나만 생성하면 된다

// 폴더 안 하위 폴더 명 [aaa]일 때
import { useRouter } from 'next/router'

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

  const onClickMove1 = () => {
    router.push("/05-06-dynamic-routed-board/1")
    // 이동할 폴더 경로 (/05-06-dynamic-routed-board/[aaa])
  }
  const onClickMove2 = () => {
    router.push("/05-06-dynamic-routed-board/2")
  }

  return (
    <div>
      <button onClick={onClickMove1}>페이지 이동하기</button>
      <button onClick={onClickMove2}>페이지 이동하기</button>
    </div>
  )
}

// "/05-06-dynamic-routed-board/2"등 만든 개수에 따라
// 여러 개의 게시물로 이동이 가능하다(폴더를 많이 만들지 않아도 된다)

// 이동된 페이지
import { useRouter } from 'next/router'

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

  colsole.log(router.query.aaa)

  return (
    <div>{router.query.aaa}번 게시글 페이지 이동 완료</div>
  )
}

// onClick={onClickMove1} 을 눌렀을 경우
// "1번 게시글 페이지 이동 완료"의 문구가 뜬다