React 프로젝트 생성 시 폴더 및 파일 구조 알아보기

◉ 리액트 프로젝트 생성 시 폴더와 파일 구조 살펴보기

 

• public : create-react-app으로 개발할 React 프로젝트의 static 파일들(index.html)이 저장된 폴더 
  - public/index.html : 개발한 React 프로젝트가 표시될 파일 

• src : 실제 React를 사용하여 개발을 할 때 사용하는 폴더  
  - src/index.js : 우리가 개발한 React 프로젝트를 index.html 파일에 표시하기 위한 파일 
  - src/App.js : 기본적으로 제공되는 React 컴포넌트 예제 
  - src/App.css : App 컴포넌트에서 사용하는 CSS 파일 
  - src/App.test.js : App 컴포넌트를 테스트하기 위한 파일 
  - src/reportWebVitals.js : React의 성능을 측정하기 위한 파일 
  - src/setupTests.js : React에서 테스트를 실행하기 위한 설정 파일  
• package.json : 개발에 필요한 라이브러리를 관리하는 파일 

 

---

◉ 프로젝트 실행 

 

▪︎ package.json 파일 

• start : React 프로젝트를 개발할 때 사용 

• build : 개발한 React 프로젝트를 배포하기 위해 사용 

• test : React 프로젝트를 테스트할 때 사용 

• eject : create-react-app에서 관리하는 React 프로젝트를 일반 프로젝트로 전환 

 

 

---

◉ 렌더링 

 

▪︎ create-react-app으로 생성한 React 프로젝트에서 우리가 개발한 React가 어떻게 화면에 표시되는지 확인해보자.

 

▪︎ public/index.html 

- 우선 React는 웹 애플리케이션이므로, 화면에 표시되기 위해서는 HTML 파일이 필요함 

    → 이 역할을 public/index.html 파일이 수행 / 우리가 개발한 React가 이 index.html 파일에 표시됨 

 

 

▪︎ src/index.js

 - React는 ReactDOM을 사용하여 id값이 root인 HTML elementdp <App /> 컴포넌트를 표시함 

    → 여기서 표시되는 App 컴포넌트는 src/App.js이며, import를 통해 해당 컴포넌트를 호출해 화면에 표시함 

 

 

---

 ◎ 이렇게 생성된 React 프로젝트를 실행하면, http://localhost:3000이 자동으로 열리고,

     React 프로젝트가 실행되는 것을 확인할 수 있음 

◎ 또한, 개발자 도구를 이용해 다음의 화면 확인 가능함 

   • src/index.js 파일과 public/index.html에서 확인한 내용과 id가 root인 HTML element에 creat-react-app으로 생성된 src/App.js 파일의 내용이 표시되는 것 확인할 수 있음 

  

 

---

[ 참고 ] https://dev-yakuza.posstree.com/ko/react/create-react-app/start/#macos 

create-react-app