[React] 리액트 기본 구조 분석하기

index.js

리액트 프로젝트에서 제일 먼저 실행되는 파일

ReactDom.createRoot()를 통해 리액트 프로젝트의 기본 진입점 생성

• ReactDOM.createRoot(document.getElementById('root'));는 리액트 프로젝트가 로딩 되었을 때, 웹 페이지의 어디에 배치되어야 하는지 리액트에게 알려주는 역할을 함
• public 폴더의 index.html가 리액틔 기본 진입점
• index.html 안에 있는 `<div id="root"></div>` 에 리액트로 만든 사용자 인터페이스가 렌더링 됨

 

root.render(<App />);

• ReactDom.createRoot()으로 선택한 <div>에 어떤 걸 렌더링 해야 하는 지 리액트에게 알려주는 역할
• <div id="root"></div>에 아무것도 없지만 <App />으로 대체 됨
• JSX 문법으로 작성되어 있음
• 컴포넌트

 

 

App.js

App()이라는 함수가 정의되어 있음

• 자바스크립트 파일 안에서 HTML 코드를 리턴함
• JSX 문법