[개념] React 프로젝트 구조

React 프로젝트 구조

• React 프로젝트 생성 명령어

npx create-react-app my-app

• 위의 명령어로 생성된 React 프로젝트 폴더의 구조

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

---

. node_modules

• 프로젝트에서 사용하는 모든 npm 패키지와 의존성이 저장되는 디렉토리
• 역할 : 리액트 라이브러리, 웹팩, 바벨, eslint 같은 모듈과 프로젝트 실행에 필요한 모든 패키지를 포함
• 주의사항
  • 이 폴더는 자동으로 생성되며 직접 수정하지 않음
  • package.json에 정의된 의존성을 기반으로 npm install 명령어로 재생성 가능

---

public

• 정적 파일이 포함된 디렉토리
• 역할
  • 브라우저에서 직접 접근 가능한 정적 파일(html, 이미지 등)이 위치
    → Spring에서 resource/static 폴더와 동일하다고 생각할 수 있음
    React의 public/example.png 접근 → localhost:3000/example.png
    Spring의 resource/static/example.png 접근 → localhost:8080/example.png
  • 이 폴더 안에 있는 파일은 빌드할 때 변환되지 않고 그대로 사용
• 주요 파일
  • index.html : React 앱이 로드되는 기본 HTML 파일로, 모든 React 컴포넌트가 이곳에 마운트 됨
    
    • 마운트 : React 컴포넌트가 DOM(Document Object Model)에 삽입되어 브라우저에 표시되는 과정
      → 쉽게 말하자면, React 컴포넌트가 브라우저 화면에 렌더링되는 시점을 '마운트되다'고 표현
  • favicon.ico : 브라우저 탭에 표시되는 아이콘 파일
  • manifest.json : Progressive Web App(PWA) 설정에 사용
    •  Progressive Web App(PWA) : 웹 애플리케이션을 네이티브 앱처럼 동작하도록 만드는 기술과 설정

---

src

• 애플리케이션의 소스 코드가 포함된 디렉토리
• 역할
  • React 컴포넌트, CSS 파일, 이미지, 자바스크립트 파일 등이 위치
  • 실제로 애플리케이션 로직과 UI가 구현되는 핵심 디렉토리
• 주요 파일
  • index.js : 애플리케이션의 진입점(Entry Point) 파일로, ReactDOM을 통해 index.html의 <div id="root">에 컴포넌트를 렌더링 
  • App.js : 기본 제공되는 React 컴포넌트 파일로 애플리케이션의 기본 구조를 정의
  • App.css : App.js와 연결된 기본 스타일시트 파일

---

package.json

• 프로젝트의 메타데이터와 의존성을 관리하는 파일
  → Spring에서 pom.xml(Maven), build.gradle(Gralde)과 같은 역할
• 역할
  • 프로젝트 이름, 버전, 사용된 스크립트, 의존성 목록 등을 포함
  • 주요 정보
    • dependencies : 앱 실행 시 필요한 패키지 목록
    • devDependencies : 개발 단계에서만 필요한 패키지 목록(예: lint 도구)
    • scripts : 프로젝트 실행 명령어(예: npm start, npm test, npm run build)

.gitignore, README.md 설명 생략