리액트 라우터는 싱글 페이지 애플리케이션(SPA)에서 페이지 전환을 관리하는 데 사용되는 라이브러리입니다. 주소와 링크 컴포넌트는 리액트 라우터에서 중요한 부분이며, 이를 통해 페이지의 주소를 설정하고 링크를 생성할 수 있습니다.

주소 설정

리액트 라우터를 사용하여 주소를 설정하려면 react-router-dom 패키지의 BrowserRouter 컴포넌트를 사용해야 합니다. 이 컴포넌트는 브라우저의 주소와 일치하는 라우트를 렌더링합니다.

import { BrowserRouter, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Route path="/" component={Home} />
      <Route path="/about" component={About} />
    </BrowserRouter>
  );
}

위의 예제에서는 / 경로와 /about 경로에 대해 각각 Home 컴포넌트와 About 컴포넌트가 렌더링됩니다.

링크 생성

리액트 라우터는 Link 컴포넌트를 제공하여 링크를 생성할 수 있습니다. 이 컴포넌트는 페이지를 전환하는 역할을 합니다.

import { Link } from 'react-router-dom';

function Navigation() {
  return (
    <nav>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
      </ul>
    </nav>
  );
}

위의 예제에서는 Link 컴포넌트를 사용하여 Home과 About 링크를 생성합니다. 사용자가 링크를 클릭하면 해당 페이지로 이동하게 됩니다.

정리

리액트 라우터의 주소와 링크 컴포넌트는 싱글 페이지 애플리케이션의 페이지 전환을 관리하는 데 도움을 줍니다. 주소 설정은 BrowserRouter 컴포넌트를 사용하여 수행되며, 링크 생성은 Link 컴포넌트를 사용하여 수행됩니다.

더 자세한 내용은 React Router 문서를 참조하시기 바랍니다.