⚛️ React 프로젝트 구조, 빠르게 파악하는 방법
새로운 React 프로젝트에 참여하거나, 오픈소스 프로젝트 코드를 처음 열어보면 “어디서부터 봐야 하지?” 하는 고민.
짧은 시간 안에 전체 구조를 이해하려면 몇 가지 핵심 관문을 짚는 게 효율적.
1️⃣ 최상위 설정 파일 확인
- package.json
- 어떤 빌드도구를 쓰는지 (CRA, Vite, Next.js 등)
- 주요 라이브러리 (React Router, Redux, Zustand, React Query 등)
- 스크립트(dev, build, lint, test)
- 환경/설정 파일
- vite.config.ts, webpack.config.js, next.config.js → 빌드 및 번들링 구조
- tsconfig.json → 경로 별칭(@/…) 확인
- .eslintrc, .prettierrc → 코드 컨벤션 파악
👉 이 단계에서 전체 스택과 기본 툴 체인을 이해가능.
2️⃣ 엔트리포인트 살펴보기
- 보통 src/main.tsx 또는 src/index.js
- ReactDOM.createRoot 호출 위치
- 전역 Provider들 (Redux Provider, QueryClientProvider, ThemeProvider 등)
- 전역 스타일(global.css, theme.ts)
👉 프로젝트의 전역 상태 관리/스타일 체계가 한눈에 파악가능.
3️⃣ 라우팅 구조 파악
- src/App.tsx 혹은 src/routes/ 폴더
- Route, Routes 정의 → 어떤 페이지가 있는지, 레이아웃은 어떻게 나뉘는지 확인
👉 페이지 단위 구조를 빠르게 이해.
4️⃣ 상태 관리 흐름 확인
- Redux: src/store/, slices/
- Zustand/Recoil: src/stores/
- React Query: src/api/, src/services/
👉 데이터를 어디서 불러오고, 전역 상태를 어떻게 유지하는지 알 수 있습니다.
5️⃣ UI 컴포넌트 계층 구조
보통 3단계로 나뉩니다:
- Pages (페이지 단위 컴포넌트)
- Containers/Features (비즈니스 로직 + 데이터 바인딩)
- UI Components (순수 뷰 전용 컴포넌트)
👉 재사용성과 로직 분리 정도를 확인할 수 있습니다.
6️⃣ API/유틸리티 구조
- src/api/ → API 호출 모듈 (Axios/Fetc h 래퍼)
- src/hooks/ → 커스텀 훅
- src/utils/ → 공용 함수
👉 백엔드와 어떻게 연결되고, 비즈니스 로직이 얼마나 모듈화돼 있는지 파악 가능.
7️⃣ 빠른 탐색 팁
- 폴더 트리로 구조 훑기
tree -L 2 src/
- VS Code 전역 검색
- "createSlice(", "useQuery(", "axios.create(" 같은 키워드로 데이터 흐름 확인
- App.tsx → store.ts → routes.tsx 순으로 따라가면 큰 그림이 금방 그려짐.
✅ 한 줄 정리
React 프로젝트는 엔트리포인트 → 라우팅 → 상태관리 → UI 레이어 → API 구조 순서로 살펴보면 빠르게 큰 그림을 파악할 수 있음.
✍️ 새로운 프로젝트에 들어갈 때는 “package.json → main.tsx → App.tsx → store → api” 루트만 훑어봐도 전체 윤곽이 잡힙니다.
