컴포넌트 재사용성 높이기

- DUMMY_MUSIC_DATA.ts

export const dummyMusicData = [
  {
    id: 1,
    category: "music",
    title: "Late Late Summer",
    artist: "Bread & Butter",
    released: "1984-01-01",
    rate: 4,
    summary: "앨범 한줄 평",
    review:
      ".....",
    imageUrl:
      "https://i.discogs.com/ftWfXN5OThRP8E3lSwr03uY9XCZR1WU1TjX5AJzsXpA/rs:fit/g:sm/q:90/h:600/w:600/czM6Ly9kaXNjb2dz/LWRhdGFiYXNlLWlt/YWdlcy9SLTEwMzUz/OTY5LTE0OTU4NjU5/MTAtNDU5MC5qcGVn.jpeg",
  },
  ...
  ....
  ..
  
  ]

- DUMMY_MOVIE_DATA .ts

export const dummyMovieData = [
  {
    id: 1,
    category: "movie",
    title: "크루엘라",
    director: "크레이그 길레스피(Craig Gillespie)",
    released: "2021-05-26",
    actors: ["엠마 스톤", "엠마 톤슨"],
    rate: 4,
    summary: "한줄평",
    review: "영화 리뷰 글",
    imageUrl:
      "https://www.artinsight.co.kr/data/tmp/2106/20210603224823_vsmohzcf.jpg",
  },
  ..
  ..
  .. 
]

- /movie 의 page.tsx

import React from "react";
import Card from "components/HomeCard/Card";
import Header from "components/Header/Header";
import { dummyMovieData } from "DUMMY_DATA/movie/dummy_movie.data";
import PostList from "components/Music/PostList";

export default function Page() {
  return (
    <>
      <Card>
        <Header />
        <PostList contentList={dummyMovieData} />
      </Card>
    </>
  );
}

-/music 의 page.tsx

import Header from "components/Header/Header";
import Card from "components/HomeCard/Card";
import PostList from "components/Music/PostList";
import { dummyMusicData } from "DUMMY_DATA/dummy_music_data";

export default function Page() {

  return (
    <>
      <Card>
        <Header />
        <PostList contentList={dummyMusicData} />
      </Card>
    </>
  );
}

둘이 다른 데이터를 사용하지만, 각 페이지를 구성하는 UI는 같았기때문에 props로 보내는 데이터가 다르더라도 저 PostList 컴포넌트를 재사용하고 싶었다.

하지만 몇몇 프로퍼티 말고는 다른 프로퍼티들이 있어서 props를 직접 정의해서 보내주면 안되고 저 PostList 컴포넌트 내에서 공통된 프로퍼티들은 받고 나머지 프로퍼티들은 동적으로 결정해주어야했다.

- ContentType.ts 에서 공통된 타입 정의

export type ContentType = {
  id: number;
  title: string;
  imageUrl: string;
  [key: string]: any; // 나머지 프로퍼티들은 동적으로 결정
};

- PostList.tsx 에서 가져오기

import classes from "./PostList.module.css";
import PostItem from "./PostItem";
import { ContentType } from "types/ContentType";

type PostListProps = {
  contentList: ContentType[];
};

export default function PostList({ contentList }: PostListProps) {
  return (
    <>
      <div className={classes.post_list_card}>
        <div className={classes.post_list_container}>
          <ul className={classes.post_list_ul}>
            {contentList.map((item) => {
              return <PostItem key={item.id} {...item} />;
            })}
          </ul>
        </div>
      </div>
    </>
  );
}

이렇게하면 이미 ContentType.ts 에서 프로퍼티들을 동적으로 받을수 있기 때문에,

그리고 저렇게 PostItem 컴포넌트에 {...item} 을 보내줌으로써 PostItem 컴포넌트에서 사용할 프로퍼티를 동적으로 결정할 수 있다.