Next.js 코드 모듈화 관리

Next.js에서 코드를 모듈화해서 관리하는 방법에 대해서 배웠는데, 이건 쉽게 말하자면 React에서 컴포넌트별로 파일을 나눠놓는 것과 같은 개념이다. 코드를 모듈화해서 관리하는 것에는 여러가지 장점이 있다.

• 재사용성: 컴포넌트를 모듈로 분리하면 다른 페이지나 프로젝트에서도 동일한 컴포넌트를 재사용할 수 있어서, 코드의 중복이 줄어들고 유지/보수가 쉽다.
• 가독성: 기능별로 분리된 모듈은 코드의 구조를 더 명확하게 만들어서, 개발자가 어떤 기능이 어디에 있는지 쉽게 파악할 수 있다.
• 유지보수: 코드를 모듈화하면 특정 기능에 변경/추가가 필요한 경우에 해당 모듈만 수정하면 되기 때문에, 다른 부분에 영향을 주지 않으면서 코드를 업데이트할 수 있다.
• 협업 효율성: 여러 개발자가 동시에 작업할 때, 모듈로 분리된 코드 덕분에 각자가 맡은 부분을 독립적으로 작업할 수 있으니 충돌 가능성이 줄어들고 병합 과정도 간소화할 수 있다.
• 테스트 용이성: 모듈화된 컴포넌트는 개별적으로 테스트하기가 더 쉽다. 각 컴포넌트를 독립적으로 테스트할 수 있어서, 전체 애플리케이션이 아니라 특정 기능이 올바르게 동작하는지 확인할 수 있다.

예를 들어, 메인 페이지에서는 아래 코드처럼 API로 불러온 JSON 파일을 map()으로 돌려서 포스터와 영화 제목만 보여주고, 무비 컴포넌트를 별도로 제작해서 해당 아이템에 맞는 id가 주소창에 들어가서 이동하도록 하고 있다.

이런 관리 방식을 어디선가 본 것 같다는 기시감이 있었는데, 알고보니 내가 토이 프로젝트에서 사용한 방법이었다. 물론 그건 React 컴포넌트였긴 했지만..😂

// main page

export const API_URL = 'https://nomad-movies.nomadcoders.workers.dev/movies';

async function getMovie() {
  const resp = await fetch(API_URL);
  const json = await resp.json();
  return json;
}

export default async function HomePage() {
  const movies = await getMovie();
  return (
    <div className={style.container}>
      {movies.map((movie) => (
        <Movie
          key={movie.id}
          id={movie.id}
          poster_path={movie.poster_path}
          title={movie.title}
        />
      ))}
    </div>
  );
}

// movie component

interface IMovieProps {
  title: string;
  id: string;
  poster_path: string;
}

export default function movie({ id, poster_path, title }: IMovieProps) {
  const router = useRouter();
  const onClick = () => {
    router.push(/movies/${id});
  };

  return (
    <div className={style.movie}>
      <img src={poster_path} alt={title} onClick={onClick} />
      <Link href={/movies/${id}}>{title}</Link>
    </div>
  );
}