[Next.js] 2+α. Props(params, query)

props 활용 방법을 알아보자!

활용 방법은 컴포넌트 종류(서버, 클라이언트)에 따라 다르다.

 

1. {params, searchParams}

서버 컴포넌트에서 params, query 정보를 얻고싶을때 사용된다.

비동기처리 해야 한다!

export default async function Group({
  params,
  searchParams,
}: {
  params: { id: number };
  searchParams: { level: number; size: number };
}) {
  //   group > [id] > page.tsx
  //   http://localhost:3000/group/1?level=6&size=15

  const paramsInfo = await params;
  console.log(paramsInfo);
  //   { id: '1' }

  const queryInfo = await searchParams;
  console.log(queryInfo);
  //   { level: '6', size: '15' }

  return (
    <div>
      <div>{`group:${paramsInfo.id}`}</div>
      <div>{`group level:${queryInfo.level}`}</div>
      <div>{`group size:${queryInfo.size}`}</div>
    </div>
  );
}

 

 

 

2. usePathname, useParams, useSearchParams (from "next/navigation")

클라이언트 컴포넌트에서 params, query 정보를 얻고싶을때 사용된다.

"use client";

import { usePathname, useParams, useSearchParams } from "next/navigation";

export default function Group() {
  //   user > [userId] > page.tsx
  //   http://localhost:3000/user/1?aa=ebeb&bb=wfwf
  
  const path = usePathname();
  console.log(path);
  //   /user/1
  
  const params = useParams();
  console.log(params);
  //   { userId: '1' }
  
  const querys = useSearchParams();
  console.log(querys);
  //   ReadonlyURLSearchParams { 'aa' => 'ebeb', 'bb' => 'wfwf' }
  console.log(querys.get("aa"));
  //   ebeb
  
  return <div>{`user:${params.userId}`}</div>;
}

 

usePathname : 현재 URL을 "그대로" 알려준다. (활용도 낮다)

useParams : 다이나믹 라우트를 객체형태로 알려준다.

useSearchParams : 쿼리스트링을 알려준다. (get, has 메서드 사용)

 

 

 

3. useRouter (from "next/navigation")

클라이언트 컴포넌트에서 프로그래밍 방식의 페이지 이동에 사용된다.

"use client";

import { useRouter } from "next/navigation";

export default function GoHome() {
  const router = useRouter();
  const onClick = () => {
    router.push("/");
  };
  return (
    <div>
      <button onClick={onClick}>Home</button>
      <button onClick={() => router.push("/login")}>Login</button> // 브라우저 기록 스택에 추가 O
      <button onClick={() => router.replace("/login")}>Login</button> // 브라우저 기록 스택에 추가 X
      <button onClick={() => router.back()}>Back</button>
    </div>
  );
}

 

 

4. useSelectedLayoutSegment, useSelectedLayoutSegment (from "next/navigation")

클라이언트 컴포넌트에서 nav 메뉴 클릭시 css 효과 적용에 유용하다.

"use client";

import {
  useSelectedLayoutSegment,
  useSelectedLayoutSegments,
} from "next/navigation";

export default function GoHome() {
  //   a > b > c > d > e > f > page.tsx
  //   http://localhost:3000/a/b/c/d/e/f

  const segment = useSelectedLayoutSegment();
  console.log(segment);
  //    a
  
  const segments = useSelectedLayoutSegments();
  console.log(segments);
  //    [ 'a', 'b', 'c', 'd', 'e', 'f' ]
  
  return <div>Segement</div>
}

 

useSelectedLayoutSegment : 레이아웃의 한단계 아래 경로 segment를 알려준다.

useSelectedLayoutSegments : 경로 전체를 알려준다.