[React]리액트와 컴포넌트

main.jsx

main entry file (진입점을 가지고 있는데 전체 애플리케이션의 메인 파일)
웹사이트가 로딩될 때 main.jsx에 있는 코드가 가장 먼저 실행되죠.

package.json

node.js가 이용하는 파일인 package.json

외부 의존성 명시 즉,서드파티 라이브러리(패키지)를 이용할 것인지를 명시해놓는 곳입니다.

프로젝트에서 패키지 관리를 위해 이용합니다

여기에선 react와 react-dom을 사용하는데 이 둘은 각각의 라이브러리이지만

한 팀에서 개발한 라이브러리입니다.
이 패키지 두 개의 조합이 리액트 혹은 리액트 라이브러리가 되는 것입니다.

◼️ 코드 설명

main.jsx는 ReactDOM으로 시작하는데요.

여기서 createRoot이라는 메소드를 호출합니다.

이 메소드는 HTML 코드의 요소 포인터를 받는데요.

(document.getElementById('root'))

(이 부분은 바닐라 자바스크립트 코드입니다.)

root이라는 ID를 가진 요소를, 프로젝트에 있는 HTML 파일에 있는 요소에 접근하는 거예요.

즉, main.jsx 파일에 있는 이 코드는 root이라는ID를 가진 div 요소에 접근하고
render 메소드를 호출합니다, 호출 대상은 createRoot이 반환하는 객체고요.

render 메소드는 ReactDOM이 제공하는 메소드입니다.

  <React.StrictMode>
    <App />
  </React.StrictMode>

render에 JSX 코드를 전달합니다.

이 코드를 정리하자면, 리액트에 시키는 작업은

root이라는 ID를 가진 요소 안에 이 리액트 코드를 렌더하라는 것입니다.

이 코드를 화면에 뿌리라는 얘기죠.

StrictMode가 하는 일은 리액트가 제공하는 특별한 기능인데요.

1. 우리가 작성한 코드가 최적인지 아닌지를 확인해서 알려주는 기능입니다
2. 또 다른 역할로는 추후 리액트가 업데이트되거나 했을 때, 우리가 작성한 코드가 호환되지 않거나 한 상황에 경고를 주는 역할을 합니다.

여기서 더 중요한 부분은 바로 이 App 부분인데요

보시면 이 부분도 import된 부분이에요

'./App'에서 App을 import하고 있는데요.
이 App은 <App /> 여기에서 JSX를 통해 렌더됩니다.