React App을 설치한 후 살펴보면 가장 크게 눈에 띄이는 부분이 바로 Index.html과 Index.js이다. 이 둘 중 어떤 한 파일이라도 사라진다면 React App은 제대로 실행되지 않을 것이다.
이번 포스팅에서는 Index.html과 Index.js, Routes.js 간의 관계를 살펴보고자 한다.
💻 Index.js
Index.js파일에서는 ReactDOM.render를 통해 작성된 Component의 jsx가 html로 변환되어 사용자의 UI에 노출되는 과정을 실행한다.
Index.js의 구조를 살펴보면 1. React를 import 2.ReactDOM을 import해주고, ReactDOM.render(< Component />, document.querySelector("#root"))가 맨 밑에 작성되어있다.
그럼 이 root는 어디에 작성되어있을까??
💻 Index.html
public폴더의 Index.html파일을 살펴보면 <div id="root"></div>로 되어있는 부분을 어렵지 않게 찾을 수 있다.
잘 살펴보면 Index.html에는 저 div 태그 말곤 body에 어떤 태그도 적혀있지 않다. (두둔
여기서 SPA, Single Page Application의 개념이 등장하게된다.
단 하나의 html 파일에서 여러가지의 컴포넌트들을 조합, 재조합해 여러가지 페이지가 보여주는게 SPA의 핵심 개념이다.
Index파일을 삭제하거나 다른 이름으로 변경할 경우 React App이 제대로 실행되지 않는 경우를 확인할 수 있을 것이다 :)
💻 Routes.js
이름만 봐도 Index.js, Index.html과는 다르다.
Routes.js는 Index.js 바로 하위에서 다른 요소들을 감싸고 있는 형태를 띄게 된다.
react-router-dom에서 import한 Link 혹은 withRouter를 이용해 변환된 페이지 엔드포인트에 따라 보여줄 컴포넌트를 결정해두면 Router가 컴포넌트들을 관리해 보여주고 하는 방식으로 이용된다.
🗺️ 전체 관계도
