React 컴포넌트 어떻게 나눌까 — 포트폴리오 프로젝트로 정리한 기준

React로 포트폴리오 사이트를 만들면서 처음 고민했던 것 중 하나가 컴포넌트를 어떻게 나눠야 하는가였다. 파일을 무조건 잘게 쪼개는 게 맞는지, 아니면 하나에 다 넣어도 되는지 기준이 없었다.

만들면서 자연스럽게 "이건 따로 빼는 게 낫겠다", "이건 합쳐도 되겠다"는 감이 생겼다. 포트폴리오 프로젝트를 기준으로 실제로 어떻게 나눴는지 정리했다.

컴포넌트란 — UI를 나누는 단위

React에서 컴포넌트는 UI를 독립적인 단위로 나눈 것이다. 레고 블록처럼 조각들을 조합해서 페이지를 만드는 방식이다. 컴포넌트를 잘 나눠두면 재사용이 쉽고, 수정할 때 해당 파일만 건드리면 되어서 관리가 편해진다.

실제 포트폴리오에서 나눈 기준

포트폴리오 프로젝트의 컴포넌트 구조는 크게 두 가지로 나뉜다. 여러 페이지에서 공통으로 쓰이는 것과 특정 페이지에서만 쓰이는 것이다.

src/
  components/
    common/  ← 공통으로 쓰이는 컴포넌트
      GNB.jsx     ← 모든 페이지 상단 네비게이션
      Footer.jsx  ← 모든 페이지 하단 푸터
      Cards.jsx  ← 여러 페이지에서 쓰는 카드 UI
      Modal.jsx  ← 여러 페이지에서 쓰는 모달
  pages/
    Home.jsx    ← 홈 페이지
    Product.jsx ← 프로덕트 페이지
    Contact.jsx ← 문의 페이지

common에 넣는 기준 — 두 곳 이상에서 쓰면

GNB(네비게이션)와 Footer는 모든 페이지에 공통으로 들어가기 때문에 common에 넣었다. Cards와 Modal도 여러 페이지에서 반복해서 쓰는 UI라서 같이 묶었다.

기준은 단순하다. 두 곳 이상에서 쓰인다면 공통 컴포넌트로 분리하는 게 낫다. 같은 코드를 여러 파일에 복붙하면 나중에 수정할 때 다 찾아서 바꿔야 하기 때문이다.

💡 한 곳에서만 쓰인다면 굳이 분리 안 해도 된다 특정 페이지에서만 쓰이는 UI라면 굳이 별도 컴포넌트로 빼지 않아도 된다. 처음부터 완벽하게 나누려다 오히려 파일이 너무 많아지면 찾기 더 어려워진다. 코드가 길어지거나 재사용할 일이 생겼을 때 그때 분리해도 늦지 않다.

pages에 넣는 기준 — 라우터와 연결되는 단위

pages 폴더에는 URL 경로와 1:1로 연결되는 파일을 넣었다. Home, Product, Contact처럼 각각 하나의 페이지를 담당하는 컴포넌트들이다. 페이지 단위로 파일이 나뉘어 있으니까 특정 페이지를 수정할 때 어느 파일을 열어야 하는지 바로 알 수 있다.

포트폴리오 프로젝트의 실제 컴포넌트 폴더 구조

React 컴포넌트를 나누는 기준은 단순하다. 두 곳 이상에서 쓰이면 공통 컴포넌트로 분리하고, 한 곳에서만 쓰이면 굳이 나누지 않아도 된다.
pages는 URL 경로와 연결되는 페이지 단위, components/common은 여러 페이지에서 공통으로 쓰이는 UI 단위로 나누면 관리하기 편하다.
처음부터 완벽하게 나누려 하기보다 쓰다 보면서 필요할 때 분리하는 게 현실적이다.