각 파일들의 역할에 대해

Question

안녕하세요

index.html,

App.js

main.js

의 각각 역할이 잘 이해되지 않습니다.

index.html 은 최상위 DOM 을 위한 것이고

App.js 는 추후 거대한 서랍장을 만들기 위한 파일이고

main.js 는 React JSX 문법을 사용하기 위한 파일인가요?

궁금하여 질문 드립니다 감사합니다.

Answer

각 파일의 역할이 궁금하신 거죠?

App.js는 리액트 컴포넌트입니다. App이라는 거대한 서랍장이 맞습니다.

그리고 index.html은 문서(document)라고도 부르는 웹페이지입니다. 브라우져는 이 문서를 읽어서 화면에 그려 주죠.

App 컴포넌트는 어딘가게 그려져야하는데요 바로 문서 위에 그려야 합니다. 아직 App.js만으로는 화면에 출력될수 없죠. App.js를 index.html에 로딩해도 그려지지는 않아요.

main.js에 보시면 ReactDOM을 사용하는데요. 이녀석이 컴포넌트를 문서에 그려주는 역할을 합니다.

// 컴포넌트를 문서에 그려라
ReactDOM.render(
  // 이 컴포넌트를
  <App />, 
  // 이 문서의 특정 위치에
  document.querySelector('#app')
)