[React.js] Create-React-App 구조 알아보기

Create-React-App

Facebook에서 제공하는 React 프로젝트의 개발 환경 Initializer 입니다.
기본적인 개발 환경이 다 구축되어있고 그 위에서 개발을 위한 코드 수정만 하면 됩니다.
개발에만 집중할 수 있도록 하는 아주 좋은 오픈소스입니다.

또한, 잘 구축된 개발환경이기 때문에 React에 대하여 공부하는 용도로 사용되어도 좋을 것 같습니다.
따라서 Create-React-App 으로 만들어진 프로젝트로 React의 구조 및 작동 원리를 알아보겠습니다.

Create-React-App의 공식 페이지

Create-React-App을 홈페이지를 참조하여 만들면 다음과 같은 폴더구조를 갖는 리엑트 프로젝트가 생기게 됩니다.

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js

1. /public

가상 DOM을 사용하는 리액트는 실제 DOM이 필요합니다. 즉, 가상 DOM이 들어갈 빈 껍데기 html이 필요하다는 것인데 그 빈 껍데기가 존재하는 폴더입니다.

├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json

favicon.ico

페이지 아이콘 이미지 파일

index.html

가상 DOM이 들어가기 위한 빈 껍데기 html 파일입니다.

<div id="root"></div>

• React DOM 에 의해 관리되는 모든 것이 이 요소 안에 들어가므로 이걸 루트(root) DOM 노드라고 부릅니다.

manifest.json

• 웹, 앱 매니페스트는 사용자가 앱을 볼 것으로 예상되는 영역에 웹 앱이나 사이트를 나타내는 방식을 개발자가 제어하고, 사용자가 시작할 수 있는 항목을 지시하고, 시작 시의 모습을 정의할 수 있는 JSON 파일입니다.

{
    "short_name": "React App",
    "name": "Create React App Sample",
    "icons": [
        {
            "src": "favicon.ico",
            "sizes": "64x64 32x32 24x24 16x16",
            "type": "image/x-icon"
        },
        {
            "src": "logo192.png",
            "type": "image/png",
            "sizes": "192x192"
        },
        {
            "src": "logo512.png",
            "type": "image/png",
            "sizes": "512x512"
        }
    ],
    "start_url": ".",
    "display": "standalone",
    "theme_color": "#000000",
    "background_color": "#ffffff"
}

2. /src

리엑트 개발이 이루어지는 메인 폴더입니다.

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

index.js

import  React  from  'react';
import  ReactDOM  from  'react-dom';
import  './index.css';
import  App  from  './App';
import  *  as  serviceWorker  from  './serviceWorker';

ReactDOM.render(<App  />, document.getElementById('root'));

serviceWorker.unregister();

• ReactDOM.render()

  해당 함수 호출 시, React의 Virtual DOM 을 만들기 시작하며, DOM 과 React를 연결하게 됩니다.

  index.html 의 비어있는 Element을 ReactDOM 에 연결하여 javascript 로 화면을 채워줍니다.

  ReactDOM.render(<App />, document.getElementById('root'));

• serviceWorker.unregister()

  • 브라우저의 백그라운드에서 실행되는 자바스크립트 worker 입니다. 네이티브앱처럼 오프라인 상태에서도 사용가능하고, 푸시 알림(Nofification) 기능도 사용할 수 있다.

      /* register() 과 unregister()를 통해 활성화 할수 있습니다. */
      serviceWorker.unregister();
      // serviceWorker.register();

[참고]
Create-React-App 파일 분석 참고 url
https://d2.naver.com/helloworld/9297403