[TIL/React] 리액트 앱의 실행 순서와 컴포넌트

리액트 실행 순서

1. `localhost:3000`으로 접속을 요청하면, 리액트 앱 서버는 public 폴더의 `index.html`을 반환함
2. 개발자 도구 `Element` 탭에서 태그에 작성된 `script` 태그를 확인한다. 그리고 `bundile.js`를 불러와 실행한다.
3. `bundle.js`는 src 폴더에 있는 `index.js`와 이 파일이 불러온 모듈을 하나로 묶어놓은 파일이기 때문에, `index.js`에 어떤 내용이 있는지 파악해야 리액트 앱의 동작을 제대로 이해할 수 있음
4. `index.js`는 `ReactDOM.createRoot` 메서드로 돔에서 리액트 앱의 루트가 될 요소를 지정함
5. `render` 메서드를 사용해 돔의 루트 아래에 자식 컴포넌트를 추가하고, 결과적으로 App 컴포넌트가 렌더링 됨

---

 

2. 컴포넌트

객체 지향 언어 용어로, 화면 UI를 담당하는 클래스

 

클래스 컴포넌트와 함수 컴포넌트 두 가지가 있음

• 리액트 제공 기본 컴포넌트는 소문자로 시작 (div)
• 사용자 컴포넌트는 대문자로 시작함 (HelloWorld)