[개인 포트폴리오] [트위터 클론 SNS Deli] 분석 Part. 3 'main.tsx'

main.tsx

// React 라이브러리를 가져옵니다.
import React from 'react';

// ReactDOM 라이브러리를 가져옵니다. React 18부터 ReactDOM의 createRoot를 사용하여 애플리케이션의 루트를 생성합니다.
import ReactDOM from 'react-dom/client';

// App 컴포넌트를 가져옵니다. 이는 애플리케이션의 루트 컴포넌트입니다.
import App from './App.tsx';

// ReactDOM의 createRoot 메서드를 사용하여 'root'라는 id를 가진 DOM 요소를 찾아서 애플리케이션의 루트를 생성합니다.
// ReactDOM.createRoot : React 애플리케이션의 루트를 생성합니다. 루트는 애플리케이션의 진입점이며, 모든 컴포넌트가 이 루트 아래에서 렌더링됩니다.
// document.getElementById('root') : HTML 문서에서 id가 root인 DOM 요소를 선택합니다. 이 DOM 요소는 React 컴포넌트가 렌더링될 컨테이너 역할을 합니다.
// ! 연산자는 TypeScript에서 null이 아님을 명시적으로 나타내는 논리 연산자입니다. 이를 통해 document.getElementById('root')가 null이 아님을 보장합니다.
// 만약 root 요소를 찾을 수 없는 경우, 이는 애플리케이션이 제대로 로드되지 않거나 HTML 파일에 id="root"인 요소가 존재하지 않는 문제를 나타냅니다.
// render :  React 요소를 지정된 DOM 컨테이너에 렌더링합니다. 사용자에게 UI를 표시합니다.
ReactDOM.createRoot(document.getElementById('root')!).render(
  // React.StrictMode로 애플리케이션을 감쌉니다. 이는 개발 모드에서 잠재적인 문제를 감지하고 경고를 표시하는 도구입니다.
  // -> React.StrictMode는 두 번 렌더링시킨다.
  <React.StrictMode>
    {/* App 컴포넌트를 렌더링합니다. */}
    <App />
  </React.StrictMode>,
);

1. React 및 ReactDOM 라이브러리 임포트:
   • React와 ReactDOM 라이브러리를 각각 가져옵니다. React는 React 컴포넌트를 작성하는 데 사용되며, ReactDOM은 컴포넌트를 실제 DOM에 렌더링하는 데 사용됩니다.
2. App 컴포넌트 임포트:
   • App 컴포넌트를 가져옵니다. App은 애플리케이션의 루트 컴포넌트로, 애플리케이션의 모든 구성 요소를 포함합니다.
3. ReactDOM.createRoot:
   • document.getElementById('root')를 사용하여 HTML 문서에서 id가 'root'인 DOM 요소를 찾습니다.
   • !는 TypeScript의 non-null assertion operator로, getElementById가 null을 반환하지 않는다고 컴파일러에게 확신시킵니다.
   • ReactDOM.createRoot는 React 18에서 새로 도입된 API로, 이 DOM 요소를 루트로 사용하여 React 컴포넌트를 렌더링합니다.
4. render 메서드:
   • render 메서드를 호출하여, React.StrictMode로 감싼 App 컴포넌트를 렌더링합니다.
   • React.StrictMode는 애플리케이션에서 잠재적인 문제를 감지하고 개발 중에 경고를 표시하는 데 사용됩니다. 이는 프로덕션 빌드에서는 아무런 영향을 미치지 않습니다.
   • App 컴포넌트는 애플리케이션의 루트 컴포넌트로서, 실제 렌더링되는 모든 다른 컴포넌트들을 포함합니다.

이 코드는 React와 TypeScript를 사용한 기본 설정 파일로, 애플리케이션의 루트 컴포넌트를 DOM에 렌더링하는 역할을 합니다.