navigating (feat. page router)

🌀 Link

✏️  Link 컴포넌트???

• 예전에는 a 태그를 이용해서 페이지 이동. 하지만 a 태그는 새 페이지를 불러오기 위해 새로운 http요청을 보냄, react 앱을 실행할 때 갖는 state가 변경되는 단점이 있음
• 그래서 Link 컴포넌트 사용, Link 컴포넌트는 리액트 구조에 맞게 페이지를 이동

import Link from "next/link"

export default function HomePage() {
  return (
    <div>
      <h1>홈페이지</h1>
      <ul>
        <li>
        // Link 컴포넌트의 href 속성에 이동하고자 하는 페이지 경로를 입력하면 됨
          <Link href="/portfolio">포트폴리오</Link>
        </li>
      </ul>
    </div>
  )
}

✏️  동적 라우트로 navigating

• 리액트에서 하던 방식 그대로 동적 데이터를 map()을 사용해서 동적인 경로를 만들어 주면 된다.

import Link from "next/link"

export default function ClientsPage() {
  const clients = [
    { id: "dan", name: "bidanee" },
    { id: "lee", name: "leeyoung" },
    { id: "max", name: "parkji" },
  ]
  return (
    <div>
      <h1>유저 페이지</h1>
      <ul>
        {clients.map((client) => (
          <li key={client.id}>
            <Link href={`/clients/${client.id}`}>{client.name}</Link>
          </li>
        ))}
      </ul>
    </div>
  )
}

 

✏️  Link 컴포넌트의 href 

• 경로를 문자열 대신 객체로 작성가능

import Link from "next/link"

export default function ClientsPage() {
  const clients = [
    { id: "dan", name: "bidanee" },
    { id: "lee", name: "leeyoung" },
    { id: "max", name: "parkji" },
  ]
  return (
    <div>
      <h1>유저 페이지</h1>
      <ul>
        {clients.map((client) => (
          <li key={client.id}>
            <Link
              href={{
                pathname: "/clients/[id]",
                query: { id: client.id },
              }}
            >
              {client.name}
            </Link>
          </li>
        ))}
      </ul>
    </div>
  )
}

 

✏️  버튼으로 navigating

•  다른 페이지로 이동시키는 push 메서드를 사용 (useRouter()의 속성)
• push는 Link컴포넌트처럼 경로를 객체로 구성 가능
• push대신 replace를 사용하면 이동할 페이지를 현재페이지에서 켜주기 때문에 바로 직전 페이지로 돌아가지 못함

import { useRouter } from "next/router"

export default function ClientProjectsPage() {
  const router = useRouter()
  const loadProjectHandler = () => {
/*
	1. push  =>    router.push("clients/dan/project1") 

	2. push의 경로를 객체로  
	router.push({
 	  pathname:"/client/[id]/[clientprojectid]",
 	  query:{id:"dan", clientprojectid:"project1"}
	}

	3. replace =>   router.replace("/clients/dan/project1")
*/
  }
  return (
    <div>
      <h1>사용자의 프로젝트</h1>
      <button onClick={loadProjectHandler}>프로젝트1</button>
    </div>
  )
}