02-4) 리액트 동작 원리 알아보기

1. 이전 단원에서 리액트의 역할

  App.js, index.js를 받아와서 해석 후, 해석한 결과물을 index.html에 끼워넣음

  -> index.html의 <div id="root"> </div> 사이에 프로젝트 폴더의 해석본(App.js, index.js의 해석본)을 넣는 역할

 

2. 실습을 통해 이해하기

   1) index.js 살펴보기

-App.js파일에 작성한 코드를(<App />),  index.html id가 root인 엘리멘트에(getElementById('root')), 넣어줌(ReactDOM.render)

 

2) index.html 수정해 보기

- index.html의 <div id = "root"></div> 를 <div id = "potato"></div>로 변경 후 npm start 실행 시 오류 발생 

- 오류를 수정하려면 index.js의 'root'를 'potato'로 변경하면 됨