React 프로젝트 폴더 구조 잡는 법 — 디자이너가 포트폴리오 만들며 정리한 방식

React 프로젝트를 처음 시작하면 파일이 금방 쌓인다. 컴포넌트, 페이지, 이미지, 스타일 파일까지 — 아무 생각 없이 만들다 보면 루트 폴더에 파일이 뒤엉켜서 나중에 뭐가 어디 있는지 찾기 어려워진다.

포트폴리오 사이트를 만들면서 폴더 구조를 어떻게 잡을지 고민했다. 정답이 있는 건 아니지만, 실제로 써보면서 "이렇게 나누니까 편하다"는 걸 느낀 구조를 정리했다.

전체 폴더 구조 한눈에 보기

실제 포트폴리오 프로젝트의 구조다. 크게 public과 src 두 영역으로 나뉜다.

public/
  images/
    print/
    product/
    promotion/
    website/

src/
  components/
    common/  ← 공통 컴포넌트
    mockup/  ← 특정 기능 컴포넌트
  data/     ← 콘텐츠 데이터
  pages/    ← 페이지별 파일
  styles/   ← 전역 스타일
  App.jsx
  main.jsx

실제 포트폴리오 프로젝트의 폴더 구조 — VS Code 탐색기 화면

이미지는 public/images에 — 카테고리별로 폴더 분리

이미지 파일은 src가 아닌 public 폴더 안에 넣었다. React에서 public에 있는 파일은 빌드 과정 없이 그대로 접근할 수 있어서 이미지처럼 정적인 파일을 관리하기 편하다.

이미지가 많아질 것을 대비해서 카테고리별로 폴더를 나눴다. print, product, promotion, website처럼 작업 종류별로 구분해두니 나중에 이미지를 찾거나 추가할 때 훨씬 편했다.

💡 public vs src — 이미지는 어디에 넣어야 할까? public에 넣으면 /images/photo.png처럼 경로를 직접 쓸 수 있다. src 안에 넣으면 import 구문으로 불러와야 한다. 포트폴리오처럼 이미지가 많고 동적으로 경로를 조합해야 하는 경우엔 public이 편하다.

components — 공통과 기능별로 나눈다

컴포넌트 폴더는 common과 기능별 폴더로 나눴다. common에는 여러 페이지에서 공통으로 쓰이는 GNB(네비게이션), Footer, Cards, Modal 같은 것들을 넣었다. 특정 페이지나 기능에서만 쓰이는 것들은 별도 폴더로 분리했다.

• 1 common/ — GNB, Footer, Cards, Modal 등 전역에서 쓰이는 컴포넌트
• 2 기능별 폴더 — 특정 페이지에서만 쓰이는 컴포넌트는 별도 분리

pages — 페이지마다 jsx와 css를 세트로

각 페이지는 pages 폴더 안에 Home.jsx + Home.css처럼 jsx와 css를 세트로 관리했다. 페이지가 늘어나도 어떤 파일이 어떤 페이지 것인지 바로 파악할 수 있다.

data — 콘텐츠 데이터는 따로 분리

포트폴리오 프로젝트 목록, 설명 같은 콘텐츠 데이터는 data/projects.js에 별도로 분리해뒀다. 나중에 내용을 수정하거나 항목을 추가할 때 코드 전체를 뒤지지 않고 이 파일 하나만 열면 돼서 관리가 훨씬 편하다.

💡 처음부터 완벽한 구조를 잡으려 하지 않아도 된다 프로젝트 초반엔 파일이 몇 개 없어서 구조가 별로 중요하지 않다. 파일이 쌓이면서 "이건 따로 폴더를 만드는 게 낫겠다" 싶을 때 옮기면 된다. 처음부터 완벽하게 잡으려다 시작도 못하는 것보다 일단 만들고 정리하는 게 낫다.

React 프로젝트 폴더 구조는 크게 public(정적 파일)과 src(소스 코드)로 나뉜다.
이미지는 public/images에 카테고리별로, 컴포넌트는 공통과 기능별로, 페이지는 jsx+css 세트로, 데이터는 별도 파일로 분리하면 관리가 편하다.
처음부터 완벽한 구조보다 만들면서 정리해나가는 게 현실적이다.