Next.js 14) 대충 내가 헷갈려서 적어본 url 받는 방법.
일단 "http://localhost:3000/album/272a8c26-96f7-489b-86b4-537189bfc654" 라는 주소가 있다고 가정을 해보겠다.
사실 내가 지금 프로젝트에서 생성해둔 주소이다.
클라이언트 컴포넌트에서 url 받는 방법 :
1. 동적(id)으로 생성된 세그먼트 값 얻기.
보다시피 /272a8c26-96f7-489b-86b4-537189bfc654 이 부분은 [id]라는 동적 세그먼트를 통하여 생성된 것이다.
이 값을 얻기 위해서는 useParams()를 사용하면 된다.
useParams() : 현재 URL로 채워진 경로의 동적 매개변수를 읽을 수 있게 해주는 클라이언트 구성 요소 후크.
const params = useParams();
console.log(params);
// {id: '272a8c26-96f7-489b-86b4-537189bfc654'}
2. 도메인 뒤 모든 path 얻기.
이것은 usePathname()을 사용하면 된다.
but, 쿼리 값은 얻을 수 없다.(ex: ?v=2)
const pathname = usePathname();
console.log(pathname);
// /album/272a8c26-96f7-489b-86b4-537189bfc654
3. 쿼리 값 얻기.
https://dnjfht.tistory.com/150
어제 한 번 포스팅 했지만 쿼리 값을 얻을 때는 useSearchParams()를 사용하면 된다.
useSearchParams() : 현재 URL의 쿼리 문자열을 읽을 수 있는 클라이언트 구성 요소 후크.
const searchParams = useSearchParams();
const title = searchParams.get('title');
// null
형식은 이러하다.
그런데 지금 이 url에는 query 값을 받고 있지 않기 때문에 null이 값으로 들어온다.
하지만, 특정 url에서 쿼리 값을 받고 있다면 query명, searchParams()를 사용하여 쿼리 값을 얻을 수 있다.
여기까지가 클라이언트 컴포넌트에서 url을 받는 방법.
그렇다면 이제 클라이언트, 서버 컴포넌트 둘 다에서 url을 받을 수 있는 방법을 알아보자.
♠ 읽어보면 좋은 것 :
https://nextjs.org/docs/app/api-reference/file-conventions/layout#params-optional
https://nextjs.org/docs/app/api-reference/file-conventions/page#searchparams-optionalhttps://nextjs.org/docs/app/api-reference/functions/use-pathname
아, 그리고 이 테스트를 진행하면서 한 가지 알게 된 사실인데 params, searchParams 등을 사용하면
클라이언트 컴포넌트에서 사용했다고 한들 서버 터미널에 콘솔이 찍히게 된다. (둘 다 콘솔창에 찍힌다)
아무래도 서버 측에서 계산을 하는 기능인 것 같다.
1. useParams() 대신 params
이건 클라이언트, 서버 컴포넌트 둘 다에서 사용할 수 있는 대신, page.tsx, layout.tsx에서만 사용할 수 있는 것 같다.
page.tsx, 일반 컴포넌트에서 둘 다 실험해본 결과,
같은 url이라도 page.tsx에서는 params를 사용하여 값을 불러올 수 있었고
일반 컴포넌트에서는 params를 사용하여 값을 불러올 수 없었다.
'use client';
import CommonDetailPage from '@/app/components/CommonDetailPage';
import SidebarEx from '@/app/components/SidebarEx';
import { useParams, usePathname, useSearchParams } from 'next/navigation';
export default function Album({ params }) {
const pathname = usePathname();
const searchParams = useSearchParams();
const title = searchParams.get('title'); console.log(pathname, params, title);
return <CommonDetailPage />
}
2. useSearchParams() 대신 searchParams
searchParams는 page.tsx에서만 사용할 수 있다.
layout.tsx에서 searchParams를 사용할 수 없는 이유는,
navigation 중에 공유 레이아웃이 다시 렌더링되지 않아 navigation 간에 searchParams가 부실해질 수 있기 때문이다.
useSearchParams()와 달리 get을 사용하여 접근하지 않아도 된다.
"http://localhost:3000/section/aae01b42-5beb-4f8d-a59a-b00422f3e561?title=listen_again_recommened"
이 url을 searchParams로 받아본 결과, { title: 'listen_again_recommened' }라고 값이 나오는 것을 확인할 수 있었다.
3. usePathname() 대신 없음!!!
서버 컴포넌트에서 현재 URL을 읽는 것은 지원되지 않는다고 한다.
이는 페이지 탐색 전반에 걸쳐 레이아웃 상태가 유지되도록 지원하기 위한 의도라고 한다.
오늘의 두 번째 정리 끝!!
이걸 계속 정리해야지, 정리해야지 했지만 그동안 바빠서 정리를 하지 못했다...ㅠㅠ
이렇게라도 정리를 하니 매우 뿌듯한 부분...