React 프로젝트 폴더 구조

효율적인 React 프로젝트 구조에 대한 고민

참고 영상

https://www.youtube.com/watch?v=64Fx5Y1gEOA

주요 구조 패턴

1. Feature-based 구조

src/
  features/
    auth/
      components/
      hooks/
      api/
    dashboard/
      components/
      hooks/
      api/

장점

• 기능별로 코드가 모여있어 찾기 쉬움
• 확장성 좋음
• 팀 협업에 유리

2. Layer-based 구조

src/
  components/
  hooks/
  utils/
  api/
  pages/

장점

• 직관적임
• 작은 프로젝트에 적합

3. Atomic Design 구조

src/
  components/
    atoms/
    molecules/
    organisms/
    templates/
  pages/

장점

• 재사용성 극대화
• 디자인 시스템과 궁합 좋음

결론

본인의 경우:

• 소규모: Layer-based
• 중대규모: Feature-based
• 디자인 시스템 중요: Atomic Design

프로젝트 규모와 팀 상황에 맞게 선택하는 게 중요하다.