[React] 리액트 폴더 구조 이해

Create React App (CRA)로 새로운 프로젝트를 시작하면 기본 폴더 구조가 자동으로 설정된다.

 

node_modules/:

• 이 디렉토리는 npm install 명령을 실행할 때 자동으로 생성되며, 프로젝트에서 사용하는 모든 Node.js 모듈이 이 폴더에 설치된다. Node.js 런타임 환경에서 필요한 여러 가지 모듈들이 포함되어 있으며, React 라이브러리도 이 폴더에 설치된다.
• node_modules/ 폴더는 소스 코드에 직접 포함되지 않으며, 필요시 언제든지 npm install 명령을 통해 다시 생성할 수 있기 때문에 소스 관리 시스템에 포함시키지 않는 것이 일반적이다

public/:

• 이 디렉토리는 index.html, 아이콘, 매니페스트 파일과 같은 정적 자산이 포함된다.
• 이 디렉토리에 있는 파일들은 모두 루트 경로에서 접근할 수 있으며, 대표적으로 index.html 파일이 여기에 위치해 있다.
• 따라서, 모든 정적 파일들이 웹 서버의 루트 디렉토리로 배포된다. 예를 들어, public/favicon.ico 파일은 /favicon.ico 경로로 접근할 수 있다.

src/:

• 이 디렉토리는 대부분의 리액트 소스 코드들을 이곳에서 작성한다. 여기에는 JavaScript 파일들, CSS 파일들, 그리고 이미지 및 기타 자산들이 포함될 수 있다.
• 메인 엔트리 파일(index.js), 루트 컴포넌트(App.js), 그리고 스타일시트(App.css, index.css)가 이 디렉토리에 위치한다.
• Webpack은 이 디렉토리 내의 파일들을 처리하도록 설정되어 있어, 컴포넌트 내에서 모듈, 스타일, 리소스를 직접 import할 수 있다.

 

 

이름을 수정하면 안되는 파일

 

• public/index.html -> 페이지 템플릿
  • 이 파일은 웹 페이지의 진입점으로, React 애플리케이션이 주입되는 HTML 템플릿. 이 파일의 내용은 정적이며, React 컴포넌트가 렌더링되는 부분을 제외하고는 변하지 않는다.
  • index.html 파일은 public 폴더에 위치한 정적 자산(CSS, 이미지 등)을 참조할 수 있다. React 컴포넌트는 주로 src 폴더 내의 파일들을 import를 통해 참조한다.
• src/index.js -> 자바스크립트 시작점 
  • index.js 파일은 JavaScript 코드의 실행이 시작되는 파일. 이 파일은 보통 루트 React 컴포넌트를 포함하며, 애플리케이션을 index.html 파일에 연결한다.
  • 이 파일을 통해 Webpack(번들러)이 애플리케이션에 필요한 다른 JavaScript 파일들과 리소스들을 포함하여 처리한다. 

 

 

 

참고: https://create-react-app.dev/docs/folder-structure/