[React] props, url 파라미터 전달 방법 정리

Next13 이후부터,
app 디렉토리를 사용하는 경우 next/router가 아닌 next/navigation을 사용해야 한다.

컴포넌트 props 이용

컴포넌트 호출을 이용한 파라미터 넘겨주기

'use client'
import UserProfilePageSection from '@/sections/user-profile-page-section'
import { useSearchParams } from "next/navigation";

export default function UserPage() {
    const params = useSearchParams();
    const userEmail = params.get("email");
    const userIdx = params.get("idx");
  
    return (
        <UserProfilePageSection params={{ userEmail: userEmail, userIdx: userIdx }}/> 
      );
}

컴포넌트 호출로 전달된 파라미터 넘겨주기

'use client'

interface UserProfilePageSectionProps {
    params: {
      userEmail: string;
      userIdx: string;
      // 다른 필요한 props들도 여기에 추가할 수 있음
    };
  }
  
  const UserProfilePageSection: React.FC<UserProfilePageSectionProps> = ({ params }) => {
    const { userEmail, userIdx } = params;
  
    // userEmail과 userIdx를 사용하여 원하는 작업 수행
  
    return (
      <div>
        {userEmail}
        {userIdx}
      </div>
    );
  };
  
  export default UserProfilePageSection;

URL 파라미터 이용

URL을 이용한 파라미터 넘겨주기

[Nextjs] Linking & Navigating

import Link from 'next/link';

export default function PostList({ posts }) {
  return (
    <ul>
      <Link href={`/main/user/profile?email=${session.email}&idx=profile`}>Profile</Link>
      ))}
    </ul>
  );
}

URL로 전달된 파라미터 받아주기

import { useSearchParams } from "next/navigation";

export default function UserPage() {
    const params = useSearchParams();
    const userEmail = params.get("email");
    const userIdx = params.get("idx");
  
    return (
        <UserProfilePageSection params={{ userEmail: userEmail, userIdx: userIdx }}/> 
      );
}

`NextRouter` was not mounted. 에러가 나서 찾아보던 중 원인을 알 수 있었다..

https://nextjs.org/docs/messages/next-router-not-mounted