[React] Router 예제

import './App.css';           // App 컴포넌트의 스타일을 가져옵니다.
import { BrowserRouter, Routes, Route } from 'react-router-dom'; // react-router-dom 라이브러리에서 필요한 컴포넌트를 가져옵니다.
import Home from './components/Home'; // Home 컴포넌트를 가져옵니다.
import Search from './components/Search'; // Search 컴포넌트를 가져옵니다.

function App() {  // App 컴포넌트를 정의합니다.
  return ( 
    <div className="App"> 
      <BrowserRouter>  {/* BrowserRouter: HTML5 히스토리 API를 사용하여 URL을 관리하는 최상위 컴포넌트 */}
        <Routes>  {/* Routes: path에 따라 다른 컴포넌트를 렌더링하는 컴포넌트 */}
          <Route path='/' element={<Home />} />  {/* path가 '/'이면 Home 컴포넌트를 렌더링 */}
          <Route path='/search' element={<Search />} />  {/* path가 '/search'이면 Search 컴포넌트를 렌더링 */}
        </Routes>
      </BrowserRouter>
    </div>
  ); 
}

export default App; // App 컴포넌트를 다른 파일에서 사용할 수 있도록 내보냅니다.

코드 설명:

• react-router-dom 라이브러리를 사용하여 싱글 페이지 애플리케이션(SPA)에서 라우팅 기능을 구현합니다.
• BrowserRouter는 브라우저의 URL 변경에 따라 컴포넌트를 동적으로 렌더링합니다.
• Routes는 여러 Route를 감싸고 URL 경로에 따라 어떤 컴포넌트를 보여줄지 결정합니다.
• Route는 특정 경로(path)와 해당 경로에 렌더링할 컴포넌트(element)를 연결합니다.

예시:

• 사용자가 웹 브라우저에서 / 경로로 접속하면 Home 컴포넌트가 화면에 표시됩니다.
• 사용자가 /search 경로로 이동하면 Search 컴포넌트가 화면에 표시됩니다.