React 리엑트 프로젝트 폴더 구조

리엑트 프로젝트 권장 폴더 구조

개발시 어플리케이션의 폴더 구조는 프로젝트의 유지보수성와 확장성에 도움이 됩니다

React 설치 후 기본 폴더 구조를 확인해 보아요

my-react-app/
├── public/
│   ├── index.html
│   └── ..
├── src/
│   ├── assets/
│   │   ├── images/
│   │   └── styles/
│   ├── components/
│   │   ├── common/
│   │   ├── layout/
│   │   └── ...
│   ├── hooks/
│   ├── pages/
│   │   ├── HomePage/
│   │   ├── AboutPage/
│   │   └── ...
│   ├── services/
│   │   └── api/
│   ├── store/
│   ├── utils/
│   ├── App.js
│   ├── index.js
│   └── ...
├── .gitignore
├── package.json
└── README.md

public/: 정적 파일을 포함하는 폴더입니다. index.html 파일이 포함되어 있으며, 애플리케이션의 루트 파일입니다.

src/: 애플리케이션의 모든 소스 파일이 포함됩니다.

• assets/: 이미지, 폰트, 스타일과 같은 정적 자산을 저장하는 폴더입니다.
  • images/: 이미지 파일들.
  • styles/: CSS 또는 Sass 파일들.
• components/: 재사용 가능한 React 컴포넌트들을 저장하는 폴더입니다.
  • common/: 여러 곳에서 재사용될 수 있는 공통 컴포넌트들.
  • layout/: 레이아웃 관련 컴포넌트들.
• hooks/: 커스텀 React 훅을 저장하는 폴더입니다.
• pages/: 각 페이지(또는 뷰) 컴포넌트를 저장하는 폴더입니다. 각 페이지는 자체 폴더를 가질 수 있으며, 그 안에 해당 페이지와 관련된 컴포넌트들을 포함할 수 있습니다.
  • HomePage/: 홈 페이지 관련 파일들.
  • AboutPage/: 어바웃 페이지 관련 파일들.
• services/: API 호출이나 비즈니스 로직을 처리하는 서비스를 저장하는 폴더입니다.
  • api/: API 호출 관련 파일들.
• store/: Redux 또는 다른 상태 관리 라이브러리를 사용하는 경우 상태 관리를 위한 파일들을 저장하는 폴더입니다.
• utils/: 유틸리티 함수들을 저장하는 폴더입니다.
• App.js: 루트 컴포넌트 파일입니다.
• index.js: 애플리케이션의 진입점 파일입니다.

또한 프로젝트 폴더 구성시 고려사항으로

 

• 명확한 네이밍: 폴더와 파일의 이름은 그 역할과 목적을 명확히 나타내도록 해야 합니다.
• 모듈화: 가능한 한 모듈화하여 각 컴포넌트, 훅, 서비스가 독립적으로 관리될 수 있도록 합니다.