[React] 리액트 세팅과 리액트 동작 방식에 대한 이해

React 세팅

 

리액트를 사용하기에 앞서 필요한 것은 아래와 같다

node.js / npm / npx

 

node.js는 해당 사이트에서 운영체제에 맞게 설치가 가능하고,

npm은 node.js설치시 자동으로 설치가 된다.

 

npx는 cdm에서 npm install npx -g로 설치가 가능하다.

git도 함께 설치해서 진행하는것이 좋다.

 

node -v
npm -v
npx -v

설치후 위의 명령어를 입력하여 version을 확인함으로 설치가 제대로 완료되었는지 확인할 수 있다.

 

 

 

설치 완료 후 cd Documents로 가서 명령어를 사용하여 리액트 aplication을 생성해 주어야 한다.

 

npx create-react-app [App-name]

 

 

React 동작 방식에 대한 이해

 

생성된 react create app은 터미널 명령어 npm start로 서버를 실행할 수 있다.

정상적으로 서버가 실행되면 수정사항 저장 시 바로 페이지에 적용되는 것을 볼 수 있는데,

리액트 사용 시 실시간으로 변경된 것을 확인하려면 
npm start를 실행하고 console을 종료하지 않아야 한다.

 

src폴더에서는 App.js / index.js 파일만 두고 비워주고 테스트를 했다.

 

여기서 확인해 볼 것은 index.html / index.js / App.js 세 파일이다.

//index.html
<div id="root"></div>

일단 index.html을 확인해보면

이렇게 id가 root인 빈 div를 볼 수 있다.

 

//App.js
function App() {
  return (
    <div>hi hello</div>
  );
}

export default App;

App.js 파일 안에

div App에 내용을 적고 페이지를 보면 해당 내용이 화면에 출력되는 것을 확인 할 수 있다.

하단에는 App을 export를 하고있다.

 

 

//index.js
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에서 export한 App을 import하고

render해주어 id를 root로 설정해주었다.

 

여기서 설정한 id를 index.html에서 받아와서 root div에 내용을 노출시키는 것이다.

이 세 파일만 확인을 해도 서로 연결되어있는 구조임을 알 수 있다.

 

 

그리하여 개발자도구의 element에는 이렇게 root안에 app.js에서 만든 div가 있음을 확인할 수 있다.

 

 

하지만 페이지 소스보기(ctrl +u)를 통해 확인해보면 root가 비어있는 것을 확인할 수 있다.

 

 

즉 react는 소스코드에 처음부터 html을 넣지 않고 (그래서 빠르다)
빈 html을 로드한 후 아까 작성했던 App()을 이용해 html을 추가하는 방식으로 작동한다.