1.0 ~ 1.2 create-react-app / 깃허브 만들기/ react가 동작하는 방법

#1.0 Creating your first React App

🍮 이번 시간에는 React를 시작하는 방법에 대해 알아보겠다.

 

🍒 create-react-app

React는 매우 모던한 코드이기 때문에 최신 브라우저가 React를 이해하지 못하기 때문에 Babel, Webpack을 사용해서 못생긴 코드로 바꾸어주어야 한다.

-> 그러나 create react app이라는 것을 이용하면 이 작업을 하지 않아도 된다.

 

create-react-app은 기본적으로 하나의 명령을 실행해서 React Web App을 Set up할 수 있게 해준다.

 

🍒 create-react-app 설치하기

콘솔을 켜고 만들고 싶은 폴더를 지정한 후 만들고 싶은 app이름을 정해서 다음과 같이 작성 후 엔터를 친다.

npx create-react-app movie_app_2021

 

 

 

🍒 vscode에서 열기

visual studio code에서 movie_app_2021을 폴더를 연다.

README.md를 수정한다. (별 의미 없긴 함)

 

🍒 package.json

  "scripts": {

    "start": "react-scripts start",

    "build": "react-scripts build",

    "test": "react-scripts test",

    "eject": "react-scripts eject"

  },

↑ package.json

이걸 보면 scripts 부분에서 test, eject는 지워버린다. start와 build만 있으면 된다.

 

*참고로 yarn과 npm은 동일한 역할을 한다.

 

🍒 npm start

 

콘솔에서 npm start를 하면 이렇게 자동으로 실행이 된다.

 

그리고 두개의 URL이 있는데 하나는 우리 컴퓨터에서 접속할 수 있는 Local과 Wifi URL을 주었다.(폰으로 테스트해보거나 하고 싶을 때 그 URL을 바로 사용할 수 있다)

 

#1.1 Creating a Github Repository

🍮 이번 시간에는 우리 프로젝트를 깃허브에 올리는 것을 해볼 것이다.

 

1. 우리 프로젝트에서 콘솔에서 git init을 입력한다.
2. 깃허브로 가서 우리 계정에서 Repository(저장소)를 새로 생성한다.
3. 생성한 저장소의 주소를 복사하여 콘솔창에 'git remote add origin 주소'라고 친다.
4. git add .
5. git commit -m "어쩌고 저쩌고"
6. git push origin master

 

#1.2 How does React work?

우리 프로젝트의 폴더를 살펴보면 3개의 폴더가 있다.

- node_module : 우리가 손대지 않음

 

- public

* public에는 favicon이라는 것을 가지고 있는데 보다시피 화면 맨 위에서 볼 수 있는 것처럼 상단에 나타나는 것이다.

 

- src

* 기본부터 설명하기 위해서 대부분을 지울 것이다.

* App.js, index.js 만 남게 다 지운다.

* index.js의 3번째줄, 5번째 줄, 그리고 ReactDom.render 밑에 있는 것들을 지운다.

import React from 'react';

import ReactDOM from 'react-dom';

import App from './App';

ReactDOM.render(

  <React.StrictMode>

    <App />

  </React.StrictMode>,

  document.getElementById('root')

);

↑ index.js

이것만 남게 됨

 

App.js에서도 다 지운다. 여기선 오직 react만 import하고

import React from "react";

function App() {

  return (

    <div className="App">

    </div>

  );

}

export default App;

↑ App.js

이것만 남도록 한다.

 

아무튼 이렇게 하고 npm start로 실행해보면 아무것도 없다.

 

또한 create-react-app은 실시간으로 내가 작성한 것을 반영해주기 때문에 내가 수정하고서 저장하면 새로고침하면 자동으로 반영된다. (속도가 진짜 빠름)

 

내가 src 안에 있는 App.js에 className이 App인 div에 hello라고 입력하고 npm start를 해서 localhost:3000으로 들어가서 개발자 도구로 확인해보면,

이렇게 div id = root인 곳 아래에 들어가있는 것을 볼 수가 있다.

 

 그러나 public 폴더 안에 있는 index.html에서는 div id가 root인 박스 안에 아무것도 없다.

↑ public > index.html

 

이게 우리가 react가 어떻게 동작하는지 이야기할 때인데, react가 무엇이냐면, react는 당신이 거기에 쓰는 모든 요소를 생성한다는 것이다. 자바스크립트와 함께 그것들을 만들고 그것들을 HTML로 밀어 넣는다. 그러니 왜 여기서 HTML이 보이지 않는지 알겠지? React는 이 곳에 element를 넣는 역할을 담당한다.

 

너의 모든 react application을 div 사이에 넣어.

 

import React from 'react';

import ReactDOM from 'react-dom';

import App from './App';

ReactDOM.render(

  <React.StrictMode>

    <App />

  </React.StrictMode>,

  document.getElementById('root')

);

못 믿겠으면 src > index.js 안에 있는 ReactDOM.render라고 하는 부분을 보면, 이 녀석은 App을 render하려고 하는데(import App from "./App" 이녀석 말이야) 그것을 getElementById를 통해 root라는 id를 찾아서 그 안에 넣어준다는 것이다.

만약 public > index.html의 아까 그 div의 id를 root가 아니라 potato로 바꾸고 저 코드를 실행시키면 에러가 생긴다. 왜냐하면 getElementById("root")가 존재하지 않기 때문이다.

 

우리가 hello!라고 작성한 페이지를 오른쪽마우스를 눌러서 소스코드 보기를 하면 hello 부분이 안보이는 것을 볼 수가 있다. 그냥 오직 public > index.html의 코드만 보이는데, 이게 바로 react를 빠르게 하는 이유이다.

 

react는 소스코드에 처음부터 HTML을 넣지 않고 HTML에서 HTML을 추가하거나 제거하는 법을 알고 있다. 그래서 application이 이것을 로드할 때 빈 HTML을 로드하게 되고 그런 다음에 react가 너의 component에 작성해뒀던 것들을 HTML에 밀어넣게 된다.

 

이것이 react가 동작하는 방식이다. virtual DOM이라는 것이 있어 virtual 버츄얼, 존재하지 않는 다는 말이야. 보다시피 소스코드에는 존재하지 않아 react가 그걸 만들어내는거야

 

*요약 : react는 virtual DOM을 만들어내기 때문에 가상이라 존재하지 않기 때문에 속도가 빠르다.