React -3

수업 표준 리액트 프로젝트

• index.js
  가장 먼저 실행되어질 js파일
  

• 1번줄에서 react-dom/client에서 ReactDOM을 가져오고 있다. 즉, react-dom이라는 제 3자 라이브러리로부터 ReactDOM 객체를 가져오는 것
  이전에 로컬에 설치한 의존성(Dependencies) 중 하나인데 package.json 파일에 React 의존성이 두가지가 있다.
  
  두 개의 개별 패키지이지만 React 라이브러리라고도 볼 수도 있다. 각기 다른 역할을 하지만 결국에 react-dom과 react모두 React 라이브러리로부터 같은 의존성을 갖음

이를 통해 해당 라이브러리가 제공하는 기능을 index.js 파일에서 사용할 수 있다.
모든 파일을 작고 관리하기 쉽게 만들기 위해서라고도 볼 수 있다.

• 6번 줄에서 react-dom 내보내준 ReactDOM객체를 활용하여 createRoot 메서드를 호출
  이를통해 주요 엔트리 포인트가 생성된다.

createRoot
React 애플리케이션을 불러온 웹페이지 상에서 어디에 배치해야 하는지 React에 알려주는 것
이 루트를 통해 public폴더에 있는 index.html파일로 이동

index.html 파일 안에 살펴보면 root란 id값을 가진 div태그가 있는데 그냥 기본적인 정규 div태그이다.

하지만 이 div태그에 React로 구축할 사용자 인터페이스를 추가하게 되는데 그게 상단에 나온 creatRoot(document.getElementById('root'))가 되겠다.
즉, 메인 React 애플리케이션이 렌더링 될 곳!

• 6번줄에서 creatRoot로 루트를 지정한 다음 root 객체를 상수나 변수로 저장
• 7번줄에서 root 객체에 render메서드를 호출하여 div 태그에 뭘 렌더링 해야 하는 건지 알림
  ReactDOM에 렌더링하고 싶은걸 알려주는 것 -> () JSX구문

그럼 이 App이란 건 뭘까?
첫 번째론 상단 4번째 줄에서 import로 가져온 것 = App파일에서 App을 가져옴(App.js파일에서 가져옴, .js는 생략하지만 .css나 다른 파일확장자라면 붙여주자)

※ ./를 정확히 정의하는 걸 여기서 처음 알게 되었는데 상대 경로를 뜻하는 것으로 이 index.js파일이 있는 같은 폴더를 확인하라는 의미!

App은 결국 컴포넌트, root인 ID를 가진 요소의 자리에 렌더링할 컴포넌트!
그러면 가져올 App.js파일을 살펴보자면

간단하게 되어 있는데 App이라는 함수를 가지고 있고 그 함수를 export로 내보내고 있음
App이란 이름을 가진 함수이며 HTML 코드를 반환하고 있는데 바로 JSX 기능이기 때문
(이는 전체 프로젝트 설정인 백그라운드에서 일어나는 변환 과정 덕분! npm strat)

JSX

JavaScript 안에 잇는 HTML코드 / 자바스크립트XML을 의미(HTML은 XML이라고 할 수 있기 때문)

화면 뒤에서 실행되는 변환 과정이 있기 때문에 사용 가능.
구동시킨 npm start프로세스는 브라우저에서 모든 것들이 보여지기 전에 자바스크립트 코드를 더 브라우저 친화적인 코드로 변환시킴

변환 된 코드를 보고 싶다면 개발자 도구에서 sources 탭에서 확인 가능하다.(모든 소스와 스크립트)