[React] public 파일 구조

리액트 index.js를 보면,

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';

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

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

ReactDom.render에서

root라는 아이디를 찾는 것으로 시작이 된다.

 

이 root는 public폴더 내의 index.js안의 코드에서 가지고 온다.

<div id="root"></div>

실행이 되면서 모든 파일들을 js로 변화해서 실행이 된다.

 

하지만 오디오나 이미지는? 

js파일이 아니기때문에 불러올 수 없음.

 

즉, public안에 넣어주어야하거나,

webpack을 만들어서 따로 해줘야한다..

이건 더 알아볼것

 

리액트는 public에서 가상 dom을 사용하는 리액트는 실제 dom이 필요로한다.

가상 dom이 들어갈 빈 껍데기 html이 필요하다는 것인데 이것이 바로 index.html이다