CRA 구성 및 작동

1. public/index.html

• 이 파일은 실제로 React 애플리케이션이 렌더링되는 HTML 파일.

• src 디렉토리에서 개발된 모든 React 코드가 여기에서 실제로 DOM에 삽입됨.

• 기본적으로 <div id="root"></div>가 포함되어 있으며, 이 div는 React 애플리케이션의 진입점
React가 src/index.js를 통해 이 root에 애플리케이션을 마운트함

• SEO와 관련된 메타 데이터 및 기본 HTML 구조를 이 파일에서 정의할 수 있음

• React 컴포넌트는 이 HTML 파일 내에서 id="root"로 지정된 <div> 태그에 마운트됨

2. src/index.js

• React 애플리케이션의 진입점(entry point)

• App 컴포넌트를 public/index.html의 <div id="root"></div>에 마운트하는 역할을 함

• ReactDOM.render(<App />, document.getElementById('root')) 와 같은 코드를 통해 App 컴포넌트가 실제로 DOM에 렌더링 됨
(ReactDOM이 public/index.html의 id="root"인 DOM 요소에 React 컴포넌트를 렌더링)

• 전역적으로 필요한 설정이나 초기화 코드도 이 파일에 추가될 수 있음.

• 예를 들어, Redux 같은 상태 관리 라이브러리의 설정을 여기에 포함하거나,
서비스 워커 등록을 수행할 수 있음

• 일반적으로 이 파일에서 App.js라는 주 컴포넌트를 임포트하여 ReactDOM.render로 렌더링함

3. src/app.js

• 애플리케이션의 주요 컴포넌트 또는 루트 컴포넌트를 정의하는 파일.

• 기본적으로 App이라는 이름의 함수형 또는 클래스형 컴포넌트를 포함하며, 이 컴포넌트가 전체 애플리케이션의 UI를 담당함

• 이 컴포넌트는 다른 하위 컴포넌트들을 포함할 수 있으며,
애플리케이션의 페이지 및 기능을 논리적으로 구분하는 역할을 함

import React from 'react';
import './App.css'; // App 관련 스타일

function App() {
  return (
    <div className="App">
      <h1>Welcome to React</h1>
      {/* 다른 컴포넌트 및 콘텐츠 */}
    </div>
  );
}

export default App;

• 애플리케이션의 전반적인 UI를 관리하는 루트 컴포넌트.
이 컴포넌트가 index.js에서 불러와져서 렌더링됨.
 

• 보통 React Router를 사용하여 라우팅을 구현하거나,
상태 관리와 관련된 컨텍스트를 전달하는 역할도 수행
 
 
src/app.css
• App 컴포넌트와 관련된 스타일을 정의하는 CSS 파일.
• (App.js 컴포넌트에만 해당하는 로컬 스타일을 정의)
• 이 파일은 src/app.js에서 import하여, App 컴포넌트에 적용됨.
• 특정 페이지 또는 기능에 국한된 스타일링이 포함될 수 있음

1. public/index.html: React 애플리케이션이 렌더링될 HTML 파일.

2. src/app.js: 애플리케이션의 루트 컴포넌트.

3. src/index.js: 애플리케이션의 진입점, App 컴포넌트를 DOM에 마운트.

4. src/app.css: App 컴포넌트에 적용되는 스타일.

5. src/index.css: 애플리케이션 전역 스타일.