폴더 명: (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>
);
}
폴더 명: 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}/>
//////////////////////// 부모 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>
);
}