React 애플리케이션의 폴더 구조는 프로젝트의 복잡도와 팀의 선호도에 따라 다를 수 있습니다.
1.기본 폴더 구조
my-react-app/
│
├── public/ # 정적 파일 (HTML, 이미지, 아이콘 등)
│ ├── index.html # 기본 HTML 파일
│ └── ...
│
├── src/ # 소스 코드 폴더
│ ├── assets/ # 이미지, 폰트, CSS 파일 등
│ ├── components/ # 재사용 가능한 컴포넌트
│ ├── hooks/ # 커스텀 훅
│ ├── pages/ # 페이지 컴포넌트
│ ├── services/ # API 요청, 비즈니스 로직
│ ├── utils/ # 유틸리티 함수
│ ├── App.js # 루트 컴포넌트
│ ├── index.js # 엔트리 포인트 파일
│ └── ...
│
├── node_modules/ # npm 패키지들
│
├── .gitignore # Git 무시 규칙
├── package.json # 프로젝트 설정 및 의존성 정보
├── README.md # 프로젝트 설명
└── ...2. 폴더 설명
- public/: 웹 서버가 제공하는 정적 파일들이 위치합니다. index.html 파일이 주로 있으며, favicon이나 로고 이미지 등도 포함될 수 있습니다.
- src/: 실제로 작성하는 코드들이 위치하는 폴더입니다.
- assets/: 이미지, 폰트, CSS 파일과 같은 정적 자원이 위치합니다.
- components/: 여러 곳에서 재사용할 수 있는 컴포넌트들이 위치합니다. 보통 버튼, 모달, 폼과 같은 UI 컴포넌트들이 들어갑니다.
- hooks/: 커스텀 React 훅을 저장합니다.
- pages/: 라우팅이 가능한 페이지 단위의 컴포넌트들이 위치합니다. 페이지별로 폴더를 만들어 하위 컴포넌트를 함께 관리할 수도 있습니다.
- services/: API 요청 로직이나 데이터베이스 관련 로직과 같은 서비스 계층을 구현합니다.
- utils/: 여러 곳에서 사용될 수 있는 유틸리티 함수나 상수 등이 위치합니다.
- App.js: 애플리케이션의 루트 컴포넌트로, 라우팅이나 전역 상태 관리 등이 주로 설정됩니다.
- index.js: ReactDOM을 통해 React 애플리케이션을 실제 DOM에 렌더링하는 엔트리 파일입니다.
3. 복잡한 애플리케이션을 위한 추가적인 구조
더 복잡한 애플리케이션에서는 다음과 같은 폴더를 추가할 수 있습니다:
- store/: Redux 또는 Context API를 이용한 상태 관리 관련 코드
- styles/: 전역 스타일 또는 테마 관련 파일
- types/: TypeScript를 사용할 경우, 타입 정의 파일
- tests/: Jest와 같은 테스트 프레임워크를 사용하는 경우, 테스트 관련 코드
이 구조는 가이드라인일 뿐이며, 팀의 요구 사항에 따라 유연하게 변경할 수 있습니다. React 프로젝트를 시작할 때는 간단하게 시작하고, 필요에 따라 폴더 구조를 확장하는 것이 좋습니다.
반응형
SCSS(Sass)를 사용하는 경우, CSS 파일 구조와 유사하게 SCSS 파일을 관리해야 합니다. 프로젝트 규모와 복잡도에 따라 SCSS 파일을 구성할 수 있지만, 일반적으로 다음과 같은 폴더 구조를 사용합니다.
1. 기본 폴더 구조 (SCSS 포함)
my-react-app/
│
├── public/
│ ├── index.html
│ └── ...
│
├── src/
│ ├── assets/
│ │ ├── images/ # 이미지 파일
│ │ └── styles/ # SCSS 파일들
│ │ ├── base/ # 리셋, 타이포그래피 등의 기본 스타일
│ │ ├── components/ # 개별 컴포넌트 스타일
│ │ ├── layout/ # 레이아웃 관련 스타일 (그리드, 컨테이너 등)
│ │ ├── pages/ # 페이지별 스타일
│ │ ├── themes/ # 테마 관련 스타일 (다크 모드, 컬러 팔레트 등)
│ │ ├── utils/ # 믹스인, 함수, 변수 등
│ │ └── main.scss # 메인 SCSS 파일 (다른 SCSS 파일들을 import)
│ ├── components/ # 재사용 가능한 컴포넌트
│ ├── hooks/ # 커스텀 훅
│ ├── pages/ # 페이지 컴포넌트
│ ├── services/ # API 요청, 비즈니스 로직
│ ├── utils/ # 유틸리티 함수
│ ├── App.js
│ ├── index.js
│ └── ...
│
├── node_modules/
│
├── .gitignore
├── package.json
├── README.md
└── ...
2. 폴더 설명 (SCSS 관련)
- assets/styles/: 스타일 관련 파일들을 모두 모아둔 폴더입니다.
- base/: 일반적으로 모든 페이지에 공통적으로 적용될 스타일을 작성합니다. 예를 들어, reset.scss, typography.scss와 같은 파일이 위치할 수 있습니다.
- components/: 각 React 컴포넌트와 관련된 스타일을 여기에 저장합니다. 예를 들어, Button.scss, Card.scss 등이 위치할 수 있습니다.
- layout/: 레이아웃 구조를 정의하는 스타일을 작성합니다. 예를 들어, 그리드 시스템, 컨테이너, 페이지 섹션의 스타일이 포함될 수 있습니다.
- pages/: 각 페이지에 특화된 스타일을 저장합니다. 예를 들어, Home.scss, About.scss 등이 위치할 수 있습니다.
- themes/: 테마별 스타일을 정의합니다. 다크 모드, 라이트 모드, 또는 특정 브랜드 컬러 팔레트를 여기에서 관리할 수 있습니다.
- utils/: 전역에서 사용할 수 있는 유틸리티 스타일(변수, 믹스인, 함수 등)을 작성합니다. 예를 들어, _variables.scss, _mixins.scss 파일이 포함될 수 있습니다.
- main.scss: 모든 SCSS 파일을 import하는 메인 파일입니다. 이 파일이 프로젝트의 진입점으로 사용되며, 주로 index.js 또는 App.js에서 import합니다.
3. 파일 네이밍 규칙
- 언더스코어(_) 사용: utils 폴더와 같이 다른 SCSS 파일에 의해 사용되지만 직접적으로 컴파일되지 않는 파일들은 언더스코어를 사용하여 _variables.scss, _mixins.scss와 같이 명명합니다.
- BEM 방법론: 컴포넌트 스타일을 작성할 때는 BEM(Block Element Modifier) 네이밍 규칙을 사용하면 구조적이고 유지보수하기 쉬운 코드를 작성할 수 있습니다.
4. 예시
- main.scss
@import './base/reset';
@import './base/typography';
@import './components/button';
@import './layout/grid';
@import './themes/dark';
@import './utils/variables';
이 구조를 통해 프로젝트의 스타일 관리가 체계적이고 일관되게 이루어질 수 있습니다. 팀의 필요에 따라 폴더를 추가하거나 구조를 변경할 수 있지만, 이 기본 구조는 대부분의 React + SCSS 프로젝트에 적합합니다.
728x90
