React 기초 (1)

node.js 설치 (npm 포함) -> cmd에 node –v 와 npm –v로 확인

npx 설치 = npm instal npx –g -> npx –v로 확인

git 설치 확인 -> git —version로 확인. 없으면 검색해서 다운로드 해.

 

---

설치할 경로로 이동한 후 다음 명령어를 내리자

npx create-react-app [프로젝트명]

npx create-react-app은 react를 쉽게 시작하는 ToolChain의 일종이다.

Create a New React App – React

 

create-react-app은 react를 사용할 때 필요한 babel, Webpack 설치 등등 모든 과정을 쉽게 처리해준다. 그래서 React JS로 제작을 할 때는 항상 npx create-react-app로 시작해라.

 

그런데 왜 npm이 아니라 npx를 사용할까? npx는 자동으로 최신 버전의 create-react-app을 받아 설정하고, 로컬에 저장하지 않기 때문이다. 이는 철지난 버전을 컴퓨터에 저장하고 있는 것보다 더 효율적이다.

 

생성되면 cd movie_app_2019로 들어가서 code . 해줘라.

code movie_app_2019도 가능함

쨋든 열어라

 

들어왔으면 terminal을 켜서 여기서 시작해보자.

어디에서나 써도 된다.

npm start

(package.json을 보면 알겠지만 scripts에 이미 start 세팅이 되어 있다.)

 

이러면 local과 Network 주소를 준다.

 

---

우리는 node_modules, public, src을 가지고 있다.

modules는 안 건드릴 예정.

public/favicon,ico는 tab의 마크이고 뭐 이것저것 다 있다.

src도 많은데 영상에서 하란대로 지워주자

 

지워준 후 src에는 App.js, index.js만 남아있다.

App.js를 켜보면

 

import React from "react";

function App() { 
	return <div>what??</div>;
}

export default App;

 

이런 식으로 나와 있을 터이다. functioon App()의 return에 작성한 HTML대로 화면에 나타난다. 어째서냐? 작성한 값이 index.html에 가서 붙기 때문이다.

 

개발자도구를 켜서 html을 살펴보면 알겠지만 <div id=“root”></div>의 하위 태그에 요소가 다 붙게 된다. 즉, 소스코드를 직접 넣는 게 아니라 html에 추가하는 방식으로 작동하게 된다.

 

즉, 우리가 App.js에 작성한 것이 index.html에 직접적으로 보이지 않는다.

 

index.js를 살펴보면 다음과 같은 코드를 확인할 수 있다.

 

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

 

전에 바닐라 JS를 다뤄봐서 알겠지만 document.getElementByClassName(“something”) 같이 문서 내부를 DOM을 통해 가져온 경험이 있을 것이다.

REACT에서는 이러한 DOM을 virtual하게 가져온다.

 

virtual DOM.

이게 React가 작동하는 방식이다.

 

하여튼 이 방식으로 App.js에 작성한 코드가 index.html의 <div id=“root”></div>에 붙게 되는 것이다.

 

App.js / index.js / index.html 사이의 주고받음을 인지하라.