인프런 커뮤니티 질문&답변

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

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

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

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

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

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