5-2. Create React App (React App을 세상에서 가장 빠르고 편하게 만드는 방법)

 

 

npx - 설치되지 않은 모듈을 딱 한번만 사용하고 싶을 때 사용한다.

npx create-react-app reactexam1

명령어로 reactapp을 설치한다.

 

npm start

npm start로 시작하면, "http://localhost:3000/" 주소로웹브라우저로 나온다.

실행시킨 순간 우리의 컴퓨터는 웹서버가 된다.

{
  "name": "reactexam1",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

다음과 같이 설치되어 변경된 package.json을 볼 수 있다.

node.js기반의 웹서버 위에서 동작하고 있다.

 

컨트롤 + c를 누르게 된다면 종료할 수 있다.

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

App.js파일은 이렇게 제작되어있는데,

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h2>Hello React!</h2>
      </header>
    </div>
  );
}

export default App;

이렇게 변경하고 저장만해도, 새로고침을 하지 않아도 바로 출력이 된다.

개발자도구

다음과 같이 개발자도구가 구성되어있는것을 확인할 수 있다.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

index.js

여기에서 ReactDOM.render라고 있는데, render한다는 뜻이다.(화면에 그린다.)

import App from './App';

와 같이 App이라는 것을 불러와서, App이라는 것에 id가 root인것을 랜더하겠다라고 하는데

 

root는 어디에? public 폴더 안 index.html에  id 가 root인 div가 하나 있다.

 

그래서

실행이 되면서, src/index.js가 실행되고, index.js안에 App의 root를 렌더하여 pulic/index.html의 id가 root인 div아래로 src/App.js의 return아래로 실행이 된다.

public 폴더

favicon.ico는 웹페이지 상단의 아이콘이 된다.

robot.txt 는 구글이나 다른 사이트들이 웹사이트 수집해갈때, 수집할것과 말것을 구별해서 넣어준다.

src폴더

App.test.js는 테스트용이긴하지만, 사용하지 않기 때문에 삭제하면된다.

 

import './App.css';

function App() {
  let name = "soyeong"
  return (
    <div className="App">
      <header className="App-header">
        <h2>Hello React! {name}</h2>
      </header>
    </div>
  );
}

export default App;

export default App;

로부터 내보낸 파일을

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

import App from './App';

로 들고올 수 있다.

그런데 export default는 한개만 들고올 수 있음을 알아야한다.