[React] 프로젝트 구조

일반적인 React 프로젝트 구조는 이렇다고 한다 

demo/
 ├── src/
 │    ├── assets/
 │    ├── components/
 │    ├── context/
 │    ├── hooks/
 │    ├── layout/
 │    ├── pages/
 │    ├── routes/
 │    ├── services/
 │    ├── store/
 │    ├── utils/
 │    ├── App.js
 │    ├── index.js

 

1. assets/

• 이미지, 폰트, CSS, 전역 스타일 파일 등 정적 리소스 저장
• 예: 로고, 아이콘, 글로벌 스타일

assets/
 ├── logo.png
 ├── fonts/
 ├── styles/
 │    └── global.css

 

2. components/

• 재사용 가능한 UI 컴포넌트 모음
• 버튼, 카드, 모달 등 여러 페이지에서 공통으로 사용하는 컴포넌트를 넣음

3. context/

• React Context API를 이용한 전역 상태 관리
• 로그인 상태, 다크모드 여부 등 앱 전반에 걸쳐 필요한 데이터

4. hooks/

• 커스텀 훅을 저장하는 공간
• 예: API 호출, 윈도우 사이즈 감지, 폼 입력 관리 등

5. layout/

• 페이지 전체 레이아웃을 정의하는 컴포넌트
• 헤더, 푸터, 사이드바 같이 여러 페이지에 공통으로 들어가는 UI 구조를 관리

6. pages/

• 각 페이지 단위 컴포넌트 저장
• 예: Home, Login, Dashboard 같은 라우트 대상

7. routes/

• 라우팅 관련 파일 저장
• React Router 설정 (Route, PrivateRoute, Lazy loading)

8. services/

• API 호출, 서버 통신, 외부 라이브러리 연동 로직 저장
• axios, fetch 같은 HTTP 클라이언트 코드

9. store/

• 전역 상태 관리 (Redux, Zustand 등) 관련 파일
• action, reducer, slice 등

10. utils/

• 유틸리티 함수, 헬퍼 함수 저장
• 날짜 포맷, 데이터 변환, 공통 validation 등

11. App.js

• 앱의 최상위 컴포넌트
• 레이아웃, 라우팅, 전역 Provider(Auth, Redux 등) 연결

12. index.js

• React 앱의 진입점
• App.js를 불러와서 root DOM에 렌더링