https://nextjs.org/docs/app/api-reference/components/link
<Link> :
<Link>는 HTML <a> 요소를 확장하여 경로 간 프리페칭 및 클라이언트 측 navigation을 제공하는 React 컴포넌트다. Next.js에서 경로 사이를 탐색하는 기본 방법.
---------------------------------------------------------------------------------------------------------------------------------------
// app/page.tsx
import Link from 'next/link'
export default function Page() {
return <Link href="/dashboard">Dashboard</Link>
}
링크 컴포넌트에 사용할 수 있는 소품에 대한 요약은 다음과 같다.
Props | Example | Type | 필수 |
href | href="/dashboard" | String or Object | Yes |
replace | replace={false} | Boolean | - |
scroll | scroll={false} | Boolean | - |
prefetch | prefetch={false} | Boolean | - |
알아두면 유용한 것 :
className 또는 target="_blank"와 같은 <a> 태그 속성은 <Link>에 props로 추가할 수 있으며
기본 <a> 요소로 전달된다.
또한, props로 href를 넘겨줄 때, pathname 뿐만 아니라 query로 string 값을 넘겨줄 수 있다.
React를 사용할 때와 달리 state 값을 넘겨주거나 할 수(useNavigate로 url을 이동할 때)는 없지만,
query로 string 값을 넘겨줄 수는 있다.
<Link
href={{
pathname: '/about',
query: { name: 'test' },
}}
>
About
</Link>
위의 표를 보면 알 수 있다시피 이 외에 props를 사용하여 다양한 기능을 구연할 수도 있겠지만,
일단 오늘 다룰 내용과는 연관이 없으니 넘어가도록 하겠다.
그렇다면, 이렇게 넘겨준 query는 어떻게 받아야 할까?
이 부분이 너무 헷갈렸던 것 같다.
next.js version이 업그레이드 되면서
"next/router"의 useRouter가 아닌, "next/navigation"의 useRouter를 사용하게 되었다고 한다.
"next/router"의 useRouter를 사용할 당시에는 useRouter().query를 통하여 query 값을 받을 수 있었다고 한다.
https://nextjs.org/docs/pages/api-reference/functions/use-router
만약, "next/router"의 useRouter가 "next/navigation"의 useRouter로 어떻게 대체되고 있는지 궁금하다면? :
https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating#userouter-hook
"next/router"의 useRouter
Router 객체 :
다음은 useRouter와 withRouter 모두에서 반환하는 Router 객체의 정의이다.
- pathname :
string - pages 뒤에 오는 현재 경로 파일의 경로.
따라서 basePath, 로캘 및 후행 슬래시(trailingSlash: true)는 포함되지 않는다.
- query :
object - 동적 경로 매개변수를 포함하여 객체로 파싱된 쿼리 문자열.
페이지가 서버 측 렌더링을 사용하지 않는 경우 미리 렌더링하는 동안 빈 객체가 된다.
기본값은 {}.
asPath :
string - 검색 매개변수를 포함하여 브라우저에 표시되는 경로로 trailingSlash 구성을 준수한다.
basePath 및 로캘은 포함되지 않는다.
isFallback :
boolean - 현재 페이지가 폴백 모드인지 여부.
basePath :
string - 활성화된 경우 활성 basePath.
locale :
String - 활성 locale(활성화된 경우).
locales :
String[] - 지원되는 모든 locale(활성화된 경우).
defaultLocale :
String - 현재 기본 locale(활성화된 경우).
domainLocales :
Array<{domain, defaultLocale, locales}> - 구성된 모든 도메인 locale.
isReady :
boolean - 라우터 필드가 클라이언트 측에서 업데이트되어 사용할 준비가 되었는지 여부.
사용 효과 메서드 내부에서만 사용해야 하며 서버에서 조건부로 렌더링하는 데는 사용하지 않아야 한다.
자동으로 정적으로 최적화된 페이지의 사용 사례는 관련 문서를 참조하라.
isPreview :
boolean - 애플리케이션이 현재 미리보기 모드에 있는지 여부.
페이지가 서버 측 렌더링 또는 자동 정적 최적화를 사용하여 렌더링되는 경우
asPath 필드를 사용하면 클라이언트와 서버 간에 불일치가 발생할 수 있다.
isReady 필드가 true가 될 때까지 asPath를 사용하지 말라.
페이지가 서버 측 렌더링 또는 자동 정적 최적화를 사용하여 렌더링되는 경우
asPath 필드를 사용하면 클라이언트와 서버 간에 불일치가 발생할 수 있다.
isReady 필드가 true가 될 때까지 asPath를 사용하지 말라.
"next/router"의 useRouter의 router 객체이다.
보다보면 query를 발견할 수 있을 것이다.
이가 "next/navigation"으로 교체되면서 비슷하지만 바뀐 것들이 꽤 있다.
그 중 하나가 query에 접근하지 못한다는 것이다.
그렇다면, 지금은 현재 URL의 쿼리를 어떻게 얻을 수 있을까?
그것은 바로, useSearchParams() hook을 사용하면 된다.
useSearchParams()는 현재 URL의 쿼리 문자열을 읽을 수 있는 클라이언트 구성 요소 hook이다.
이 hook 역시 이 외에도 다양한 기능들이 포함되어 있겠지만,(나도 제대로 다 알지 못 한다.)
지금은 어떻게 쿼리를 얻을 수 있는지만 살펴보도록 하겠다.
https://nextjs.org/docs/app/api-reference/functions/use-search-params
먼저, useSearchParams hook에 접근한다.
useSearchParams hook은 매개변수를 사용하지 않는다.
접근한 후에는 get과 함께 query명을 매개변수로 집어넣는다.
그러면 손 쉽게 query 값을 얻을 수 있다.
// app/dashboard/search-bar.tsx
'use client'
import { useSearchParams } from 'next/navigation'
export default function SearchBar() {
const searchParams = useSearchParams()
const search = searchParams.get('search')
// URL -> `/dashboard?search=my-project`
// `search` -> 'my-project'
return <>Search: {search}</>
}
URL | searchParams.get("a") |
/dashboard?a=1 | "1" |
/dashboard?a= | "" |
/dashboard?b=3 | null |
/dashboard?a=1&a=2 | "1" - 모든 값을 얻으려면 getAll() 사용. |
또한, URLSearchParams.has()는 주어진 매개변수가 존재하는지 나타내는 부울 값을 반환한다.
URL | searchParams.has("a") |
/dashboard?a=1 | true |
/dashboard?b=3 | false |
'(심층)넥스트' 카테고리의 다른 글
Next.js 14) 서버 컴포넌트에서 데이터 패칭 (0) | 2024.02.24 |
---|---|
Next.js 14) Suspense를 사용한 로딩 UI (0) | 2024.02.24 |
Next.js 14) 대충 내가 헷갈려서 적어본 url 받는 방법. (0) | 2024.02.24 |
Next.js 14) 클라이언트 컴포넌트 아래의 서버 컴포넌트? (오늘의 삽질 (0) | 2024.02.24 |
구글 소셜 로그인 구현하기 (0) | 2024.02.06 |
github : https://github.com/dnjfht
포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!