리액트 프로젝트를 만들면 처음 생성되는 기본 구조는 다음과 같다.
그럼 하나하나 어떠한 역할을 하는지 알아보자!
폴더 구조
먼저 크게 3개의 폴더로 나눠지는데
node_modules: npm install을 하여 설치된 모듈들이 위치하는 폴더public: static 자원 폴더로 정작 파일들을 위한 폴더src: 리액트를 작업하는 폴더
1. public 폴더
favicon.ico: 웹 사이트 상단에 위치하는 파비콘 이미지index.html: 가상 DOM 을 위한 HTML 파일로 빈 껍데기 파일이다. (index.js에 의해 렌더링된 결과가 표시됨)manifest.json: 앱 스토어 없이 기기의 홈화면에 설치할 수 있는 웹 사이트
2. src 폴더 ✨
-
App.css: App.js 컴포넌트의 스타일을 정의하는 CSS 파일 -
App.js: React 애플리케이션의 핵심 컴포넌트로, 주요 UI와 로직을 작성 -
App.test.js: App.js 에 대한 테스트 코드 작성하는 파일 -
index.css: 전반적인 또는 전역적인 스타일 정의 (공통 스타일) -
index.js: React 의 진입점이 되는 파일로ReactDOM.render()을 사용해 App 컴포넌트를 HTML 파일의 특정 요소에 렌더링 한다. (가장 먼저 실행되는 파일) -
logo.svg: React 로고 이미지로 필요 없으면 삭제 -
reportWebSockets.js: 웹 성능 측정을 위한 기능을 제공하는 파일 -
setupTests.js: 테스트 환경 설정 파일
3. 사용자 추가 폴더
기본 폴더 이외에도 개발을 위해선 추가적으로 폴더와 파일을 만들어 구분해줘야 한다.
✅ src/components/
- 가장 기본적인 UI 요소들을 모아두는 폴더
- 예를들어
Button.js,Input.js,Header.js등 - 각 컴포넌트는 해당 컴포넌트만의
.js(혹은.jsx),.css(혹은.module.css,.scss),.test.js파일을 함께 가질 수 있다. (예: components/Button/index.js, components/Button/Button.css)
✅ src/pages/ 또는 src/views/
- 특정 페이지나 화면에 종속적인 컴포넌트나 로직을 해당 페이지 폴더에 묶어준다.
- 예를 들어
Login.js,HomePage.js등 - 각 페이지 폴더 안에는 해당 페이지에만 사용되는 컴포넌트들을 포함시킬 수 있다. (
pages/ProductDetailPage/ProductInfo.js,pages/ProductDetailPage/RelatedProducts.js)
✅ src/Feature/
- 특정 기능을 중심으로 파일을 묶어준다.
- 애플리케이션의 규모가 커질수록 유지보수성이 높아진다는 장점이 있다.
src/features/(또는src/modules/,src/domains/): 특정 비즈니스 로직이나 기능을 중심으로 파일을 그룹화 한다.
✅ 기타 유틸리티 및 공통 로직 폴더
-
컴포넌트나 특정 기능에 종속적이지 않은 공통 코드들을 모아두는 폴더
-
src/utils/: 재사용 가능한 유틸리티 함수들을 모아두는 폴더
예시: formatDate.js, validation.js, localStorage.js 등 -
src/api/: 백엔드 API와의 통신 로직을 모아두는 폴더
예시: userApi.js, productApi.js, axiosInstance.js -
src/hooks/: 커스텀 React Hooks를 모아두는 폴더
예시: useDebounce.js, useFetch.js, useModal.js -
src/store/: Redux, Zustand 등 상태 관리 라이브러리를 사용하는 경우, 관련 파일들을 모아두는 폴더
예시: store.js, slices/userSlice.js, slices/cartSlice.js -
src/assets/: 이미지, 폰트 등 정적 자원들을 모아두는 폴더
예시: images/, fonts/, icons/ -
src/styles/: 전역적으로 사용되는 스타일 변수, 믹스인, 테마 등을 모아두는 폴더
예시: variables.css, mixins.scss, theme.js (Styled-components 등 사용 시)
이렇게 폴더를 만들 때에 가장 중요한 것은 일관성과 명확성이다.
모두가 동의하는 구조를 만들고, 폴더나 파일의 이름만으로도 그 역할과 내용이 명확하게 파악되도록 하는 것이 중요하다.
초기에는 하더라도, 프로젝트가 커지면서 features, api, hooks 등으로 점진적으로 확장해 나가는 것이 일반적이고,
이럴 경우 많은 기능을 효율적으로 관리하고 유지보수할 수 있다.
