[TIL] Day 77 Next.js 14버전 App Router에서 params 활용하기

2024.01.23 화

 

간편한 라우팅 시스템을 제공하는 Next.js를 어떻게 하면 유연하게 사용할 수 있을까 고민했다.

마침 push된 주소에서 동적으로 params를 가져와서 활용해야하는 상황이 생겼다.

14버전에서는 더욱 효율적으로 params를 다룰 수 있게 되었다.

폴더를 만들고, 주소를 push하고, 받아서 활용하는 방법을 적어보자.

 

 

 

 

params

parameters(파라미터)의 축약어로 사용되는 용어이다.

함수나 메소드에 전달되는 값들을 가리키며, Next.js에서는 동적 라우팅에서 사용되는 경로의 일부를 나타내는 데에도 사용된다.

 

동적 라우팅 설정

먼저, 동적 파라미터를 사용하려면 페이지 파일을 정해진 형식으로 작성해야 한다.

app폴더 안에 "[폴더이름]"로 폴더를 만들어준다.

해당 폴더이름이 파라미터를 가져올 때 활용할 params의 명칭이다.

 

request/보낸사람아이디

해당 주소가 필요했기 때문에 request 폴더 안에 [senderId] 폴더를 만들었다.

그리고 해당 페이지에 보여줄 UI를 page.tsx에 작성했다.

 

 

 

Link로 주소 이동

request 즉, 받은요청함의 카드의 상대 프로필을 클릭하면 상세프로필 페이지가 열리는 코드를 작성할 것이다.

클릭할 수 있는 영역을 정하고 Next에서 제공하는 Link 컴포넌트를 활용하자.

href를 통해서 보내려고 하는 주소를 작성해준다.

// RequestCard.tsx
type Props = {
  listId: number;
  senderId: string;
  avatar: number;
  senderName: string;
  age: number;
  message: string;
};

function RequestCard({ listId, senderId, avatar, senderName, age, message }: Props) {
  return (
    <div className="flex flex-col items-center justify-center gap-[12px] w-[320px] p-[16px] font-pretendard bg-gray-FA rounded-[16px]">
      <Link className="flex items-center gap-[8px] self-stretch h-[42px] cursor-pointer" href={`request/${senderId}`}>
        <div className="relative flex justify-center items-center w-[42px] h-[42px] rounded-full">
          <Image
            className="rounded-full object-cover"
            src={`/assets/avatar/avatar-circle/avatar${avatar}-circle.png`}
            alt="avatar"
            width={42}
            height={42}
          />
        </div>
        <div className="flex flex-col items-start gap-[6px]">
          <div className="flex items-end gap-[4px]">
            <p className="text-[16px] font-[500] leading-[16px]">{senderName}</p>
            <p className="text-[14px] font-[400] text-gray-999 leading-[14px]">{age}</p>
          </div>
          <p className="text-[14px] font-[400] text-gray-666 leading-[20px] capitalize">{message}</p>
        </div>
      </Link>
      <div className="flex items-start w-[200px] h-[32px] gap-[8px]">
        <DeclineBtn listId={listId} />
        <AcceptBtn listId={listId} />
      </div>
    </div>
  );
}

export default RequestCard;

 

 

 

Link 컴포넌트가 아닌 함수를 이용할 때

Next에서 권장하는 페이지 이동 방법은 Link이지만, 함수로 작동하게 만들어야하는 경우도 있다.

그럴땐 useRouter 훅을 이용하자. 
여기서 주의할 점은 next/router보단 next/navigation를 사용하도록 하자.

듣기론 후자가 최근 기술이라고 한다.

import { useRouter } from 'next/navigation';

const route = useRouter()

const handleBtnClick = () => {
  route.push("/request")
}

 

파라미터 추출

페이지 내에서 동적 파라미터를 추출하기 위해 useRouter 훅을 사용할 수도 있지만,

불필요한 "use client", 즉 클라이언트 사이드 렌더링을 요구할 수도 있다.

이는  만들어놨던 동적라우팅폴더 안에 있는 page.tsx에서 props로 내려받는 방법으로 해결할 있다.

 

props로 params 안에 있는 원하는 값을 구조분해할당으로 꺼내자.

그리고 쓰이는 곳에 다시 props로 내려준다. 

// page.tsx
type Props = {
  params: {
    senderId: string;
  };
};

function ProfleDetailPage({ params }: Props) {
  const { senderId } = params;

  return (
    <Page noBackMain>
      <SenderProfile senderId={senderId} />
    </Page>
  );
}

export default ProfleDetailPage;

// SenderProfile.tsx
type Props = {
  senderId: string;
};

function SenderProfile({ senderId }: Props) {
  const [senderInfo, setSenderInfo] = useState<unNullRegisterType>();

  const border = 'border-2 border-solid border-black px-[0.63rem] py-[0.25rem] rounded-[1rem] text-[0.8125rem]';

  const getSenderInfo = async () => {
    try {
      const data = await getSenderCustomUsers(senderId);
      setSenderInfo(data);
    } catch (error) {
      alert('서버와의 통신을 실패했습니다.');
    }
  };

  useEffect(() => {
    getSenderInfo();
  }, []);

return (
.
.
.