react router 실행 과정

import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import FileViewer from "./FileViewer";
import FileDetail from "./FileDetail";
import DocsPage from "./DocsPage"; // 새 문서 페이지
import files from "./data";
import "./styles/App.css"; // 스타일 추가

const App = () => {
  return (
    <div className="App">
      <Router>
        <header>
          <h1>AI Framework 주요 기능 구현</h1>
        </header>
        <Routes>
          <Route path="/" element={<FileViewer files={files} />} />
          <Route path="/file/:fileName" element={<FileDetail files={files} />} />
          <Route path="/docs/:componentName" element={<DocsPage />} /> {/* 새 경로 */}
        </Routes>
        <footer>
          <p>&copy; 2024 Code Files Viewer. All rights reserved.</p>
        </footer>
      </Router>
    </div>
  );
};

export default App;

React Router 를 사용해 URL 경로에 따라 컴포넌트 렌더링 방식 사용

1. App 컴포넌트의 초기 렌더링

FileViewer 를 기본 경로로 렌더링 : URL에 따라 특정 컴포넌트를 렌더링하도록 설정

 

2. 파일 목록 데이터 전달

files 는 Fileviewer 컴포넌트의 props 로 전달된다.

 

import React from "react";
import { Link } from "react-router-dom";
import "./styles/FileViewer.css";

const FileViewer = ({ files }) => {
  return (
    <div className="FileViewer">
      <h2>각 주요 기능 설명</h2>
      <ul>
        {files.map((file, index) => (
          <li key={index}>
            <Link to={`/file/${file.fileName}`}>{file.fileName}</Link>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default FileViewer;

FileViewer 컴포넌트 동작

파일 리스트 생성, files.map() 을 사용하여 files 배열의 각 항목을 순회하여 li 엘리먼트 생성, file.fileName 값을 기준으로 key와 텍스트 생성