React는 효율적인 UI 개발을 지원하는 강력한 라이브러리입니다. React 프로젝트를 체계적으로 관리하기 위해 적절한 폴더 구조를 설계하는 것은 매우 중요합니다. 이번 글에서는 React 프로젝트의 기본 구조와 주요 폴더의 역할에 대해 자세히 알아보겠습니다.
프로젝트 기본 구조
React 프로젝트의 기본 폴더 구조는 다음과 같습니다:
java코드 복사react-project/
│
├── build/
├── node_modules/
├── public/
├── src/
│ ├── components/
│ ├── containers/
│ ├── pages/
│ ├── store/
├── package.json
1. build/
npm run build 명령어를 실행하면 생성되는 배포 폴더입니다. 이 폴더는 브라우저에서 실행 가능한 최적화된 정적 파일을 포함하며, 배포용으로 사용됩니다.
주요 파일:
index.html: React 앱의 엔트리 포인트static/: CSS, JS, 이미지와 같은 정적 파일
2. node_modules/
React와 관련된 모든 의존성 모듈이 설치되는 폴더입니다. npm install 또는 yarn install 명령어를 실행하면 이 폴더가 생성됩니다.
Tip:
- 이 폴더는 무겁고 크기 때문에 Git 저장소에 포함하지 않습니다.
.gitignore파일에node_modules를 추가해 관리에서 제외하세요.
3. public/
앱에서 사용되는 정적 리소스가 위치하는 폴더입니다. 주로 HTML 파일, 이미지, 폰트 등이 포함됩니다.
주요 파일:
index.html: React 앱의 뼈대가 되는 HTML 파일- 기타 정적 리소스 (예: 로고, 메타 태그 이미지 등)
4. src/
프론트엔드 작업이 주로 이루어지는 폴더입니다. 이 폴더에서 대부분의 코드 작성이 이루어지며, 주요 디렉토리는 아래와 같습니다.
src 폴더 자세히 살펴보기
1. components/
UI 요소를 담당하는 컴포넌트 파일이 위치하는 폴더입니다. 컴포넌트는 보통 재사용성을 염두에 두고 설계되며, 각 컴포넌트는 독립적인 동작을 합니다.
예시:
Button.js: 버튼 컴포넌트Header.js: 헤더 컴포넌트Footer.js: 푸터 컴포넌트
Best Practice:
- 컴포넌트는 작고 단순하게 설계하세요. 재사용성을 높이기 위해 스타일과 로직을 분리하는 것이 좋습니다.
2. containers/
컨테이너 파일이 위치하는 폴더입니다. 주로 Redux 또는 상태 관리를 사용하는 컴포넌트들이 포함되며, 상태를 props로 내려주는 역할을 합니다.
예시:
AppContainer.js: 전체 앱을 감싸는 컨테이너UserContainer.js: 사용자 정보를 관리하는 컨테이너
Tip:
- 컨테이너는 비즈니스 로직을 처리하고, 로직은 가능하면 분리하여 유지보수성을 높입니다.
3. pages/
Routing을 위한 페이지 파일이 위치하는 폴더입니다. 각 파일은 앱의 특정 화면을 나타내며, React Router와 같은 라이브러리를 사용해 라우팅 설정을 할 수 있습니다.
예시:
HomePage.js: 메인 페이지AboutPage.js: 소개 페이지ContactPage.js: 연락처 페이지
Tip:
- 페이지 컴포넌트는 보통 최상위 컴포넌트로 사용되며, 하위에
components와containers를 포함합니다.
4. store/
Redux와 관련된 작업을 수행하는 폴더입니다. 상태 관리와 관련된 actions, reducers 폴더를 포함합니다.
구조 예시:
코드 복사store/
│
├── actions/
│ └── userActions.js
├── reducers/
│ └── userReducer.js
└── store.js
Tip:
- Redux를 사용할 때는
combineReducers로 여러 리듀서를 통합하여 관리하는 것이 유용합니다.
기타 파일 설명
package.json
이 파일은 프로젝트의 메타 데이터를 담고 있습니다. 프로젝트 이름, 버전, 의존성, 스크립트 등을 정의합니다.
중요 섹션:
dependencies: 앱 실행에 필요한 모듈scripts:npm start,npm run build와 같은 명령어 정의proxy: API 요청 시 프록시 설정