[React] React 시작하기, create-react-app
[React] React 시작하기, create-react-app
react 를 시작하기에 앞서 준비 작업이 필요합니다.
우선 필요한 것들이 설치가 되었는지 확인을 해보겠습니다.
사전준비
nodeJS
node.js 가 필요합니다.
로컬에 설치되어 있는지 확인하는 방법은 아래와 같습니다.
> node -v v12.9.1
만약 아무 버전 정보가 뜨지 않으면 아래 링크로 가서 설치하시면 됩니다.
https://nodejs.org/en/
npm
npm 은 Node Packaged Manager의 줄임말로 Node로 만들어진 pakage 들을 관리해주는 툴입니다. 파이썬으로 생각하면 pip와 유사합니다.
마찬가지로 다음과 같이 버젼 확인이 가능합니다.
> npm -v 6.13.6
npm 은 nodejs 를 설치 할 때 함께 설치되기 때문에 따로 설치할 필요 없습니다.
npx
npx 는 npm의 5.2.0 버젼부터 새로 추가된 도구입니다.
npx 가 존재하지 않았을 경우에는 npm을 통해 react app 을 생성했습니다.
npm install -g create-react-app
-g 를 통해 전역적으로 create-react-app 가 설치됨으로서 여러 문제점을 야기합니다.
CRA의 무거운 의존성 라이브러리들이 컴퓨터에 남는다.
CRA 버전 업데이트 시, 전역적으로 설치된 CRA를 재설치 해야 한다.
npx 를 사용하면 이러한 문제점들을 해결할 수 있습니다.
우선 npx 도 마찬가지 방법으로 버전 확인을 통해 설치 유무를 판단할 수 있습니다.
> npx -v 6.13.6
설치하기 위해서는 npm 을 통해서 설치 가능합니다.
> npm install npx -g
아래서 다시 보겠지만 npx 를 설치했다면 npx 를 통해 react app 을 생성할 수 있습니다.
> npx create-react-app {app 이름}
최신 CPA 패키지가 다운로드가 되고 설정들을 세팅한 후에 CRA 패키지는 제거됩니다.
그렇기 때문에 무거운 의존성 라이브러리들도 남지 않고 함께 제거되는 이점이 있습니다.
Create React App
react 를 사용하다보면 ES의 최신버전까지 사용해야 하는 경우가 존재합니다.
하지만 몇몇 브라우저에서는, 특히 IE 에서는 최신버전을 지원해주지 않습니다.
그렇기 때문에 webpack 이나 babel 등 과 같은 몇몇 방법이 필요합니다.
이들을 자세하게 다루는 건 다른 포스팅에서 하도록 하고 간단히 설명하면 ES 최신버전의 코드들을 모든 브라우저에서 알아들을 수 있는 코드로 바꿔주는 역할을 합니다.
물론 하나부터 열까지 모든 것을 바꿔주지는 못하고 webpack 이 지원안되는 경우도 존재합니다.
하지만 이제는 create-react-app 을 통해서 하나의 명령어로 react web app 을 set up 할 수 있습니다.
위에서 살펴봤던 명령어죠.
> npx create-react-app {app 이름}
성공적으로 실행되었다면 app 이름으로 된 폴더가 생기고 해당 폴더로 들어가면 다음과 같은 파일트리 구조를 가집니다.
. ├── README.md ├── node_modules ├── package.json ├── public ├── src └── yarn.lock
필요없는 파일을 수정하고 지워봅시다.
README.md 는 내용을 삭제하고 원하는 내용으로 바꿔도 무방합니다.
보통 해당 프로젝트가 어떤 프로젝트인지에 대한 설명을 기재합니다.
다음은 package.json 입니다.
package.json 에 대해서도 설명할 것이 정말 많지만 우선은 넘어가도록 하겠습니다.
파일 안에 script 부분이 아래와 같이 존재합니다.
이는 script 명령들을 나타내고 있습니다.
"scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" },
test 와 eject 는 필요없으니 지워주겠습니다.
"scripts": { "start": "react-scripts start", "build": "react-scripts build" },
다음으로는 yarn.lock 을 삭제합시다.
yarn 은 facebook 에서 만든 자바스크립트 패키지 매니저로 npm 과 동일한 기능을 수행합니다.
우리는 npm 을 사용하면 되므로 yarn은 필요가 없습니다.
React App Start
create 한 directory 에서 다음 명령어를 입력하면 프로젝트가 시작됩니다.
> npm start
아래와 같은 문구가 뜨고 해당 url 로 접속하면 프로젝트가 빌드된 것을 확인 할 수 있습니다.
Compiled successfully! You can now view movie-app in the browser. Local: http://localhost:3000/ On Your Network: http://10.99.17.47:3000/ Note that the development build is not optimized. To create a production build, use npm run build.
위 화면을 보면 react 로고가 돌고 있고 여러 문구와 디자인이 되어 있습니다.
새로운 프로젝트를 시작하기 위해서 필요없는 내용들을 다시 삭제해보도록 합시다.
우선 초기 src/index.js 입니다.
// src/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(, document.getElementById('root')); // If you want your app to work offline and load faster, you can change // unregister() to register() below. Note this comes with some pitfalls. // Learn more about service workers: https://bit.ly/CRA-PWA serviceWorker.unregister();
필요없는 부분을 전부 지우고 최소한만 남겨놓았습니다.
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render(, document.getElementById('root'));
이 외에도 src 디렉토리 내에 로그 파일, css 등 필요없는 파일들을 전부 삭제해주겠습니다.
삭제할 목록은 아래와 같습니다.
src/logo.svg src/serviceWorker.js src/index.css App.test.js App.css
최종적으로 src 에는 다음만 존재합니다.
src ├── App.js └── index.js
src/App.js 도 수정해보겠습니다.
// src/App.js import React from 'react'; import logo from './logo.svg'; import './App.css'; function App() { return ( Edit src/App.js and save to reload. Learn React ); } export default App;
로고와 css 파일의 import 부분을 지우고 안의 모든 내용을 지우겠습니다.
import React from 'react'; function App() { return ( Hello World! ); } export default App;
App.js 에서 작성한 것은 index.html 의 로 들어가게 됩니다.
이 역할을 해주는 것이 index.js 이고요.
에 있는 것을 document.getElementById('root') 으로 넣어주게 됩니다.
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render(, document.getElementById('root'));
다시 localhost:3000 으로 접속하면 아무 것도 남지 않고 Hello World! 만 보이는 걸 확인 할 수 있습니다.
react 는 이러한 방식으로 동작하기 때문에 브라우저에서 페이지의 소스를 확인해도 코드가 보이지 않습니다.
단지 root 를 id 로 가지는 div 만 보이죠.
이렇게 react 가 컴포넌트를 만들어서 넣어주는 방식으로 동작하기 때문에 빠르게 동작할 수 있는 것입니다.
React 가 왜 빠른가
이 방식이 왜 빠른지 이해하기 위해서는 브라우저가 페이지를 로드하는 원리를 알아야 합니다.
브라우저에서 페이지를 로드하면 렌더링트리와 DOM트리를 생성합니다.
DOM 이란? DOM 이란 Document Object Model 의 약자로 객체를 통해 구조화된 문서를 표현하는 방법입니다. 여기서 구조화된 문서란 XML, HTML 같은 문서를 말하며 이 상황에선 당연히 HTML 이겠죠. 각 태그들을 객체로 생각하고 이러한 방식으로 javascript 와 css 를 적용합니다. DOM 트리는 이러한 객체들을 트리 구조로 나타낸 것입니다. 이로서 특정 객체를 찾고 수정하고 제거하고 삽입할 수 있습니다.
그리고 일련의 과정을 거쳐 브라우저에 페이지를 띄우게 됩니다.
이 때 자바스크립트가 DOM에 조작을 가할 때마다 렌더링트리에서 렌더링을 해주는데 한 번의 상태변경이 여러 곳에서 DOM 변경이 일어난다면 어떻게 될까요?
이럴 경우 각 DOM 변경에 대해 랜더링이 여러 번 일어날꺼라 생각하지만 다행스럽게도 브라우저는 이를 알아서 처리해줍니다.
매우 짧은 시간에 조작이 많이 일어나면 브라우저는 이를 기다렸다가 한꺼번에 처리하고 랜더링 해줍니다.
하지만 브라우저도 어쩔 수 없는 상황이 발생합니다.
offsetTop , scrollTop , getComputedStyle() 등 과 같이 현재의 값을 가져오는 것이 중요한 경우에는 랜더링을 미룰 수가 없습니다.
DOM 객체를 조작하는 것보다 조작한 후에 화면에 그리는 비용이 훨씬 크기 때문에 이는 속도를 저하시키는 원이이었죠.
react 는 이러한 문제를 Virtual DOM 을 이용하여 해결하였습니다.
실제 DOM 에 접근해서 조작하는 방식이 아니라 가상의 DOM 을 만들어 이를 메모리에 저장하고 변경 사항들을 비교하며 최소한의 내용만 반영함으로서 DOM 랜더링 회수를 줄여 성능을 향상 시키는 것이죠.
from http://ssungkang.tistory.com/264 by ccl(A) rewrite - 2020-03-06 04:20:27
댓글
댓글 쓰기