React 프로젝트 구조 설계 – 폴더 구조와 컴포넌트 관리 전략

 

작은 프로젝트에서는 폴더 구조에 크게 신경 쓰지 않아도 되지만, 규모가 커지면 체계적인 구조가 중요해집니다. 이 글에서는 React 프로젝트의 폴더 구조와 컴포넌트 관리 전략에 대해 알아봅니다.

1. 기본 폴더 구조 예시

가장 많이 쓰이는 폴더 구조는 다음과 같습니다:

src/
├── assets/          // 이미지, 폰트, 스타일 등 정적 파일
├── components/      // 재사용 가능한 UI 컴포넌트
├── pages/           // 각 라우트 페이지 컴포넌트
├── hooks/           // 커스텀 훅 모음
├── contexts/        // Context API 관련 코드
├── services/        // API 호출 등 비즈니스 로직
├── utils/           // 유틸 함수
├── App.js
└── index.js

2. 컴포넌트 관리 전략

• Presentational vs Container 컴포넌트: UI만 담당하는 컴포넌트와 로직을 처리하는 컴포넌트를 분리
• 기능 단위 구성: 기능(도메인)별로 폴더를 나누는 방식도 유용

src/
└── features/
    └── posts/
        ├── PostList.js
        ├── PostItem.js
        ├── postAPI.js
        └── postSlice.js

3. CSS 또는 스타일링 관리

스타일도 컴포넌트 기반으로 관리하는 것이 좋습니다.

• CSS Module: 컴포넌트별 스타일을 파일로 분리
• styled-components: JavaScript 내에서 스타일 정의

4. 코드 스플리팅 및 Lazy Loading

페이지 단위로 React.lazy와 Suspense를 사용해 코드 분할이 가능합니다.

const PostPage = React.lazy(() => import('./pages/PostPage'));

<Suspense fallback={<div>로딩중...</div>}>
  <PostPage />
</Suspense>

5. 실무 팁

• 폴더 이름은 소문자 + 케밥 케이스 사용 권장 (ex: user-profile)
• 재사용이 많은 컴포넌트는 components/common에 따로 보관
• 하나의 기능에 필요한 코드들은 가능한 한 폴더로 묶기

6. 마무리

React 프로젝트의 구조는 팀과 프로젝트에 따라 달라질 수 있습니다. 중요한 것은 일관성과 확장성을 고려하는 것! 이 글을 참고해 자신만의 구조를 설계해보세요.