프로젝트 구조 및 구성 요소 설명

기본적인 React 프로젝트 구조는 다음과 같습니다:

table-demo/
├── public/
│   └── index.html
├── src/
│   ├── components/
│   │   └── DataTable.jsx
│   ├── App.jsx
│   └── index.jsx
├── package.json
└── README.md

• public/: 정적 파일과 기본 HTML 문서를 포함합니다.
• src/: 애플리케이션의 핵심 소스 코드가 위치합니다.
• components/: 재사용 가능한 컴포넌트를 저장하며, 예시로 DataTable.jsx가 있습니다.
• App.jsx: 애플리케이션의 최상위 루트 컴포넌트입니다.
• index.jsx: 애플리케이션의 진입점이며, 렌더링을 담당합니다.
• package.json: 의존성 관리 및 스크립트 정의 파일입니다.
• README.md: 프로젝트 사용 방법 및 정보를 제공합니다.

실행 진입점 분석

index.jsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const rootElement = document.getElementById('root');
const root = ReactDOM.createRoot(rootElement);

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

• ReactDOM.createRoot는 React 18 이후 권장되는 렌더링 방식입니다.
• StrictMode는 개발 환경에서 잠재적인 문제를 탐지하기 위해 사용됩니다.

App.jsx

import React from 'react';
import DataTable from './components/DataTable';

const Application = () => {
  return (
    <div className="app-container">
      <header><h2>테이블 시각화 예제</h2></header>
      <main>
        <DataTable />
      </main>
    </div>
  );
};

export default Application;

• 주요 컴포넌트인 Application은 제목과 데이터 표시 컴포넌트를 포함합니다.
• 구조적으로 명확한 섹션 나누기를 통해 가독성을 높였습니다.

프로젝트 설정 파일 설명

package.json

{
  "name": "table-demo",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test"
  },
  "eslintConfig": {
    "extends": ["react-app", "react-app/jest"]
  },
  "browserslist": {
    "production": [">0.2%", "not dead"],
    "development": ["last 1 chrome version", "last 1 firefox version"]
  }
}

• dependencies: React와 관련된 핵심 라이브러리들입니다.
• scripts: 개발 서버 실행, 빌드, 테스트 등 주요 작업을 정의합니다.
• eslintConfig: 코드 스타일 검사를 위한 설정으로, 공식 규칙을 기반으로 합니다.
• browserslist: 빌드 시 지원하는 브라우저 범위를 지정합니다.