Next.js 14 시작하기 #5 File Colocation

강의 11번

File Colocation

• 관련 있는 파일이나 코드를 물리적으로 가까운 위치에 두는 것을 의미
• 코드의 가독성과 유지보수성 향상
• 예를 들어 React의 컴포넌트와 스타일 시트를 같은 디렉토리에 위치시키는 것
  
  위 사진의 dashboard 폴더 내의 두 파일 line-chart.js와 page.js 두 파일의 코드를 살펴보면 다음과 같다.

// line-chart.js
export default function LineChart() {
  return (<h1>Line Chart</h1>)
}

//page.js
function BarChart() {
  return (<h1>Bar Chart</h1>)
}

export default function Dashboard() {
  return (<h1>Dashboard</h1>)
}

linechart와 barchart의 경우 dashboard에 들어가야 할 내용이다.
하지만 해당 코드에서 localhost:3000/dashboard로 접근하면

라는 문구만 출력이 되는데 여기서 내가 Dashboard에 barchart의 내용이나 linechart의 내용을 추가하고 싶다면 아래와 같이 하면 된다.

import LineChart from "./line-chart"

function BarChart() {
  return <h1>Bar Chart</h1>;
}

export default function Dashboard() {
  return (
    <>
      <h1>Dashboard</h1>
      <BarChart />
      <LineChart />
    </>
  );
}

이와 같이 관련 있는 파일이나 코드를 물리적으로 가까운 위치에 두는 것을 file/code colocation 이라고 하며, Next.js 14 버전에선 위와 같이 활용된다.

또한 굳이 app 디렉토리 내에서만 colocate 할 필요는 없으며, 예를 들어 루트디렉토리/components 폴더를 만들어 UI 컴포넌트를 관리하는건 좋은 아이디어이다. 이와 같이 분리해서 관리하면 여러 장점이 있다.

• 재사용성 : components 폴더에 UI 컴포넌트를 모아두는 건 여러 페이지나 기능에서 동일한 컴포넌트를 쉽게 재사용할 수 있음
• 유지 보수성 : 각 컴포넌트가 독립적으로 존재하므로, 특정 UI 요소를 수정할 때 다른 부분에 영향을 주지 않고 변경할 수 있음
• 가독성과 조직성 : 프로젝트의 구조가 명확해져, 새로운 개발자가 프로젝트에 참여할 때 코드 베이스를 이해하기 수월함