✅ 리액트 프로젝트 폴더 구조 설계 Best Practice
리액트 프로젝트는 규모가 커질수록 폴더 구조가 매우 중요합니다.
깔끔한 구조는 협업과 유지보수에 핵심적인 역할을 합니다.
아래는 가장 널리 쓰이는 Best Practice 구조입니다.
✔ 기본 추천 폴더 구조
src/
assets/
components/
pages/
hooks/
utils/
services/
store/
styles/
App.js
index.js
✔ 폴더별 역할
📁 components/
재사용 가능한 UI 컴포넌트
예: Button, Card, Modal
📁 pages/
라우터와 연결된 페이지 단위 컴포넌트
예: HomePage, LoginPage
📁 hooks/
Custom Hook 저장소
예: useInput, useFetch
📁 services/
API 통신 관련 코드
예: axios.create() 인스턴스, API 함수 모음
📁 store/
상태 관리(Redux, Recoil 등)
📁 utils/
공용 함수들
예: dateFormat, numberFormat
📁 assets/
이미지, svg, fonts 등 정적 리소스
✔ 실무에서 자주 쓰는 팁
폴더명은 소문자, 컴포넌트 파일은 PascalCase
페이지는 이름 뒤에 "Page"를 붙여 명확히 구분
컴포넌트 단위 폴더 구조 유지
API 요청은 반드시 services/로 분리
상태 관리(store)와 hooks를 명확하게 구분
'리액트' 카테고리의 다른 글
| ✅ [15편] Next.js와 리액트의 차이점 완전 정리: 구조·기능·성능·실무 선택 기준까지 (0) | 2025.11.26 |
|---|---|
| ✅ [14편] 리액트 서버 컴포넌트와 클라이언트 컴포넌트 완전 정복: 개념, 차이점, 구조, 실무 적용 전략까지 (0) | 2025.11.26 |
| ✅ [13편] 리액트에서 비동기 처리 완전 정복 (0) | 2025.11.26 |
| ✅ 12편. 리액트에서 CSS 스타일링 방법 총정리 (Styled-Components, CSS Modules 등) (0) | 2025.11.26 |
| ⭐ 10편 — 리액트에서 비동기 처리 완전 정리: fetch, axios, async/await, useEffect 패턴까지 실전 가이드 (0) | 2025.11.25 |
| ⭐ 9편 — 리액트 상태 관리 기본기: Context API vs Redux 실전 비교, 초보자도 알 수 있게 정리 (0) | 2025.11.25 |
| ⭐ 7편 — React Router 완전 정복: 페이지 이동부터 동적·중첩 라우팅까지 실전 가이드 (0) | 2025.11.25 |
| ⭐ 8편 — 리액트 리스트 렌더링 완전 정복: key가 중요한 이유와 성능 문제까지 한 번에 이해하기 (0) | 2025.11.25 |