AI 요약관련 정보

• 리액트 프로젝트의 핵심은 index.html 파일이며, 이는 SPA 구조의 단일 진입점 역할을 합니다. 📄
• SPA(Single Page Application)는 하나의 HTML 페이지에서 모든 정보를 처리하며, 페이지 전체를 새로 로드하지 않고 동적으로 콘텐츠를 갱신합니다. 🌐
• SPA는 컴포넌트 단위로 UI를 구성하여 필요한 부분만 효율적으로 다시 렌더링함으로써 사용자 상호작용 시 부드럽고 빠른 화면 전환을 제공합니다. ⚡
• 컴포넌트는 UI의 독립적이고 재사용 가능한 단위로, 화면을 작은 부분으로 나누어 관리하는 방식입니다. 🧩
• MPA(Multi Page Application)와 달리, 리액트 같은 SPA는 단일 HTML 파일에서 모든 UI와 콘텐츠를 동적으로 업데이트하며, 필요한 데이터만 서버로부터 받아와 클라이언트에서 처리합니다. 🔄
• CSR(Client-Side Rendering)은 초기 렌더링 시 모든 리소스를 받아온 후, 이후 페이지 전환 시 전체 페이지 로드 없이 필요한 부분만 동적으로 업데이트하는 방식입니다. 🖥️
• 리액트 구동 원리는 index.html의 <div id="root"> 태그를 마운트 지점으로 삼아 main.tsx 파일에서 createRoot와 render 함수를 통해 <App /> 컴포넌트를 렌더링하는 것입니다. 🚀
• div#root 내부에서 라우터 개념을 통해 특정 경로에 따라 컴포넌트를 교체하며, 실제로는 단일 페이지이지만 여러 페이지가 존재하는 것처럼 보이게 합니다. 🎭
• npm run dev 명령어는 package.json에 정의된 스크립트에 따라 vite를 실행하여 리액트 프로젝트를 개발 환경에서 구동합니다. ▶️
• 리액트 개발에 앞서 SPA, CSR, 컴포넌트 렌더링 등 리액트의 구동 원리를 이해하는 것은 더욱 의미 있고 재미있는 프로젝트 진행에 중요합니다. 🤔