#1.2 How does React work?

NomadCoders

ReactJS로 웹 서비스 만들기

https://academy.nomadcoders.co/courses/enrolled/216871

#1.2

폴더를 살펴보면

node_modules

public

src

세 개의 폴더가 존재합니다.

public을 우선 살펴보자면

favicon은 React웹을 보았을때 나타나는 아이콘입니다.

index는 말그대로 index입니다. 우리의 사용에 맞게 비워져 있습니다.

mainfest.json은 dont worry ㅎㅎ (PWA로 이것은 다음에 정리)

src를 보면 많은 것을 가지고 있습니다.

기본부터 해보기 위해서 불필요한 것들은 지웁니다.

* index.js

>import './index.css';

>import * as serviceWorker from './serviceWorker';

>// 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();

을 지워줍니다.

index.js

그리고

src폴더에는 App.js와 index.js만 남겨두고 모두 지웁니다.

*App.js

>import logo from './logo.svg';

>import './App.css';

을 지워줍니다.

이로써 App.js에서 import 하는 것은 React 뿐입니다.

또한

*App.js

>

function App() {

return (

);

}

App.js

다음과 같이 수정해줍니다. 즉 div를 사용하기 위해 비워줍니다.

저장을 하고 브라우저를 보면 하얀화면에 아무것도 없는 것이 뜹니다. 계속 동작하고 있는 정상이니 진행합니다.

http://localhost:3000/

react-create-app의 장점은 바로바로 브라우저에 적용된다는 것입니다.

에디터에서 내용을 변경하고 저장하고 브라우저를 확인하면 바로 웹의 내용이 바뀌어 있음을 확인할 수 있습니다.

만들어진 React웹을 검사하면 Hello!!!!를 확인할 수 있습니다.

그러나 실제 public 폴더에 index.html의 를 확인하면 해당 div는 비어있습니다.

여기서 React에 대해 설명하고자 합니다.

React는 우리가 거기에 쓰는 모든 요소(element)를 생성한다는 것입니다.

자바스크립트와 함께 그것들을 만들어 그것들을 html로 집어넣습니다.

이 때문에 html에서는 내용이 보이지 않는 것입니다.

즉 React는 html의 빈 공간에 요소(element)들을 넣는 역할을 담당하는 것입니다.

이는 React가 빠른 이유입니다.

React는 소스코드에 처음부터 html을 넣지않고, html에서 html을 추가하거나 제거하는 법을 알고 있습니다.

virtual DOM(가상돔)을 만드는 것입니다.

소스코드에는 존재하지 않지만 React는 다양한 component를 만들어 빈 공간, html에 집어넣을 수 있습니다.

다음과 같이 진행되는 것입니다.

React는 App.js의 component를 ElementById 내부에 넣습니다.

index.html App.js index.js

from http://nerani2038.tistory.com/35 by ccl(A) rewrite - 2020-03-07 01:54:53