리액트 시작
리엑트를 시작하고 React Hook 을 배우고 있다.
궁금한것이 있어 적어보려 한다. 궁금한것은 많지만 이번 글에는
화면을 그려주는 실행 순서를 GPT 와 알아본 글이다.
1. 리액트의 실행순서
로컬 주소로 들어가면 리액트는 어떤 순서로 화면을 뿌려줄까?
GPT 에게 질문 :
요약 된 답변
그럼 index.html 과 main.jsx, App.jsx 를 확인 해보아야겠다.
index.html
바디에 뭔가가 있다 여기서 내 생각엔 div 의 id root와 script /src/main.jsx 가 뭔가 바디를 그려주는 느낌이다.
그럼 저 코드에 있는 main.jsx 를 한번 봐보자
오호 여기서 js 문법으로 Dom요소의 id = root를 찾아 createRoot를 렌더링 해주는 것 같다.
중간에
<StrictMode>
<App />
</StrictMode>이렇게 써있는것을 보니 뭔가 App 태그 안에 컴포넌트 가 들어가는것 같다
하지만 <StrictMode> 이게 뭔지 모르겠다 . GPT 에게 물어봤다.
질문 :
답변 :
아 개발중에 문제가 있는 코드를 빨리 찾기 위해 쓰는구나
그럼 없으면?
답변: 
아 StrictMode는 그냥 개발용 검사 기능이고 검사를 해주는 거라는 것을 알게되었다 .
그럼 다시 돌아가서 App을 어떻게 그려주는것일까
App.jsx
마지막 남은 App.jsx로 왔다.
위의 사진을 보니 뭔가를 return 한다. 근데 내 생각에는 앞에있던 코드와 연관 되어있는것 같다.
<StrictMode>
<App />
</StrictMode>exprot된 App을 main.jsx에서 import하여 불러와서 태그를 쓰면 Root를 찾아 화면을 그려주는 방식인것 같다.
질문 :
답변: 
실행결과:
이해
내가 이해한 바로는 다음과 같은 순서로 화면을 그려주는 것 같다.
화면 요청 -> mian.jsx 로딩 -> App.jsx 컴포넌트 렌더링 -> main.jsx 가 Root찾아 화면 그려줌
글 읽어주셔서 감사합니다.
