React의 폴더 구조

 

1️⃣ 폴더 구조

my-app
├── node_modules
├── public
├── src
├── .gitignore
├── package.json
└── README.md

• node_modules
  npm install을 하여 현재 프로젝트에 설치된 라이브러리들이 설치되어 있는 폴더로 보통 깃과 같은 저장소에 올릴 때는 이 폴더를 함께 올리지 않습니다.
• public
  index.html과 같은 정적 파일이 포함되는 곳으로 컴파일이 필요 없는 파일들이 위치하는 폴더입니다.
• src
  리액트 내부에서 작성하는 거의 모든 파일들이 이 폴더 내부에서 작성되며 이 폴더에 있는 파일들은 명령어에 따라 JS로 컴파일이 진행됩니다.
• .gitignore
  깃에 포함하고 싶지 않은 파일의 이름 혹은 폴더등을 입력하는 파일입니다.
• package.json
  프로젝트에 관련된 기본적인 내용(프로젝트의 이름, 버전 등)과 라이브러리들의 목록이 포함되어 있습니다.
  라이브러리가 설치된 node_modules 대신에 이 package.json을 깃에 포함하여 올리게 되며 후에 누군가가 프로젝트를 클론할 때 이 package.json에 적혀있는 라이브러리의 목록을 기준으로 npm에서 설치하게 됩니다.
• README.md
  보통 깃과 같은 저장소에 올릴 때 프로젝트에 대한 설명을 작성하는곳으로 해당 저장소에 진입하면 가장 먼저 띄워집니다.

 

---

 

 

2️⃣ src 내부 폴더 구조

└─ src
 ├─ App.css
 ├─ App.js
 ├─ App.test.js
 ├─ index.css
 ├─ index.js
 ├─ logo.svg
 ├─ reportWebVitals.js
 └─ setupTests.js

• App.css
  App.js에 대한 css 파일
• App.js
  컴포넌트를 정의하는 작업 파일로, 실제로 화면에 표시되는 내용 등은 여기에서 정의된다.
• App.test.js
  ’App’ 컴포넌트에 대한 테스트 코드가 포함된 JS파일. Jest와 같은 테스트 라이브러리를 사용하여 컴포넌트의 동작을 검증한다.
• index.css
  애플리케이션의 전역 스타일을 정의하는 css 파일. 이 스타일은 애플리케이션 전체에 적용된다.
• index.js
  React 애플리케이션의 진입점. 이 파일에서 애플리케이션을 브라우저에 렌더링하고 필요한 초기 설정을 수행한다.
• logo.svg
  애플리케이션의 로고나 이미지 리소스로 사용되는 SVG파일.
• reportWebVitals.js
  애플리케이션의 성능 지표를 모니터링하는 데 사용되는 스크립트 파일
• setupTests.js
  Jest와 같은 테스트 라이브러리 설정에 필요한 초기 설정을 수행하는 JavaScript 파일입니다.