파라미터로 이용되는 Props

폴더 명: (movies) > [id] > page.tsx

interface IParams {
    params: {
        id:string
    };
}

export async function generateMetadata({params:{id}}: IParams) {
    // fetching 할 수 있게하는 함수, 동적인 제목을 갖고 있는 페이지를 위해 존재한다. -> Hoem의 page는 정적이지만, [id] page의 meta data는 동적으로 바뀌어야 한다.
    const movie = await getMovie(id); // 캐싱되기 때문에 gerMovie가 두 번 호출되는 것은 나쁜 것이 아니다.
    return {
        title: movie.title,
    };
}


export default async function MovieDetailPage({
    params: {id} // [id] 에서 id를 가져온다.
}: IParams) {
    return (
    <div>
        <Suspense fallback={<h1>Loading movie info</h1>} >
            <MovieInfo id={id} />
        </Suspense>
        <Suspense fallback={<h1>Loading movie videos</h1>}>
            <MovieVideos id={id} />
        </Suspense>
    </div>
    );
}

여러개의 요소가 존재하는 interface

폴더 명: components > movie.tsx

interface IMovieProps {
    title:string;
    id:string;
    poster_path:string;
}
export default function Movie({title, id, poster_path}: IMovieProps) {
    const router = useRouter();
    const onClick = () => {
        router.push(`/movies/${id}`);
    }
    return <div className={styles.movie}>
        <img src={poster_path} alt={title} onClick={onClick}/>
        <Link prefetch href={`/movie/${id}`}>{title}</Link>
    </div>
}

<------ props 호출 ------>
<Movie key={movie.id} id={movie.id} poster_path={movie.poster_path} title={movie.title}/>

component도 props로 넘길 수 있다!

//////////////////////// 부모 page ////////////////////////
<GreyBannerComponent component={<GreyCalendar></GreyCalendar>}/>

//////////////////////// 자식 page ////////////////////////
interface pageCompoent {
    component: JSX.Element;
}

export default function GreyBannerComponent({component}:pageCompoent) {
    return(
        <div className={styles.container}>
            <div>{component}</div>
        </div>
    );
}