next.js Navigating Between Routes

정영찬·2023년 5월 21일

Next.js

목록 보기

5/10

이전에 만든 페이지들은 링크마다 페이지는 구현되어있지만, 연결되어있지는 않다.

현재 각각의 페이지를 들어갈수 있는 방법은 수동적으로 상단의 url 입력창에 입력하는 것 뿐이다.

식당 항목을 클릭하면 식당 상세페이지로 이동할수 있게 구현
검색창에서 키워드를 입력했다면 검색 결과로 이동해줘야한다.
로고 클릭했을때 메인 페이지로 갈수 있어야 한다
....

따라서 적어도 이 두가지의 기능을 구현하기 위해서는 조치가 필요한 셈이다.

2가지 방법이 존재한다.

Link 태그
userRouter 훅

Link

nav바 에 위치한 로고를 클릭했을때 메인페이지로 이동하게 해보자.

<Link href="/" className="text-2xl font-bold text-gray-700">
{' '}
OpenTable{' '}
</Link>

이렇게 해주면 로고를 클릭하면 메인 페이지로 이동할 것이다.

이것 뿐만아니라 다른 항목들에도 Link 기능을 넣어야한다.

메인 페이지에 milestones-grill이라는 항목이 있는데 이것을 클릭하면 해당 식당의 상세 페이지로 이동하게 만들 수 있을 것이다.

<div className="w-64 m-3 overflow-hidden border rounded cursor-pointer h-72">
              <Link href="/restaurant/milestonse-grill">
                <img
                  src="https://resizer.otstatic.com/v2/photos/wide-huge/2/31852905.jpg"
                  alt=""
                  className="w-full h-36"
                />
                <div className="p-1">
                  <h3 className="mb-2 text-2xl font-bold">Milestones Grill</h3>
                  <div className="flex items-start">
                    <div className="flex mb-2">*****</div>
                    <p className="ml-2">77 reviews</p>
                  </div>
                  <div className="flex font-light capitalize text-reg">
                    <p className="mr-3 ">Mexican</p>
                    <p className="mr-3">$$$$</p>
                    <p>Toronto</p>
                  </div>
                  <p className="mt-1 text-sm font-bold">Booked 3 times today</p>
                </div>
              </Link>
            </div>

물론 지금은 하드코딩으로 링크를 적었지만, 나중에는 props를 받아서 변수로 지정하여 어떤 식당 이름이던 자동으로 변동될수 있게 만들 것이다.

위의 이미지를 보면 상세페이지에서 overview 와 menu 버튼이 존재하는데,

overview - 클릭시 상세 페이지(현재 페이지)로 복귀

menu - 메뉴 페이지로 이동

  <Link href="/restaurant/milestones-            <nav className="flex pb-2 border-b text-reg">
              <Link href="/restaurant/milestones-grill" className="mr-7">
                {' '}
                Overview{' '}
              </Link>
              <Link href="/restaurant/milestones-grill/menu" className="mr-7">
                {' '}
                Menu{' '}
</Link>

이렇게 설정해놓고 menu를 클릭하면 당연히 메뉴 페이지로 이동 하겠지만, overview를 클릭하면 원래 페이지로 돌아가지 않는다. 메뉴 페이지의 overview에는 같은 설정을 해주지 않았기 때문이다.

메뉴 페이지(restaurant/[slug]/menu)에서도 Link로 변경하여 주소를 설정하면?

이렇게 메뉴와 상세페이지를 왔다갔다 할수 있게 된다.

UseRouter

UseRouter를 사용하면 클라이언트 컴포넌트 내에서 프로그래밍 방식으로 경로를 변경할 수 있다.

next/navigation을 inmport 해야한다.

그냥 Link쓰지 왜 이걸 쓰냐고?

예를 들어서 검색창에 키워드를 입력하고 검색을 누르면 해당 링크로 이동할수 있게 작성해야한다고 할때, 클릭했을때 해당 키워드를 포함시킨 url링크로 이동하는 기능을 넣고싶다

아니 그러니까 그렇게 해도 Link 넣으면 되잖아?

만약 검색창에 아무것도 없는데 검색을 실행되는 것을 막고싶다면?

일정 키워드를 입력했을때 필터링을 진행하고 난 다음 검색해야한다면?

만약 허무맹랑한 검색어같은 경우에는 유효하지 않다는 것을 알리는 페이지 경로로 이동해야한다면?

검색을 하기 전에 전처리 작업을 해야할 필요가 있다면?

그래도 Link를 써야할까?

검색을 통해 링크를 이동하기 전, 일련의 작업을 거쳐서 navigate 하고 싶다면 사용하는 것이 바로 이것이다.

메인 페이지의 검색창에서 검색 버튼을 눌렀을 때, useRouter를 사용해서 조건부 검색을 실행할수 있게 구현해보자

예를 들어서 지역을 입력받아서 검색하는 검색창에 banana를 입력했을때, alert로 경고를 알리고 검색 결과를 이동시키지 않는 기능을 만든다고 한다면

 const router = useRouter()
  const [location, setLocation] = useState('')
  
                <input
                  className="rounded  mr-3 p-2 w-[450px]"
                  type="text"
                  placeholder="State, city or town"
                  value={location}
                  onChange={(e) => setLocation(e.target.value)}
                />
                <button
                  className="py-2 text-white bg-red-600 rounded px-9"
                  onClick={() => {
                    if (location === 'banana') {
                      alert('무슨 바나나야;;;')
                      return
                    }
                    router.push('/search')
                  }}
                >

파일 맨 위에 'use client' 라고 작성해줘야 한다. useState는 Client Component에서만 동작하기 때문
useRouter 선언
useState를 사용하여 검색한 값을 담아두기위한 변수 선언
input 의 value에 location을 선언하고 onChange를 통해서 입력한 value의 값을 setLocation해준다.
검색을 진행하는 버튼을 클릭했을때, location의 값이 banana라면 alert하고 아니면 router.push로 검색 페이지 경로로 이동

이렇게 하고 나서 banana를 제외한 검색어를 입력해보자