리액트 애플리케이션을 개발할 때, 라우팅과 관계 관리는 매우 중요합니다. 이를 위해 리액트 라우터(React Router)를 사용할 수 있습니다. 리액트 라우터는 SPA(Single Page Application)에서 페이지 간의 전환을 도와주는 도구입니다. 이번 블로그에서는 리액트 라우터와 관계 관리 방법에 대해 알아보겠습니다.

리액트 라우터 설치

먼저, 리액트 라우터를 설치해야 합니다. npm을 사용하여 다음 명령어를 실행해주세요:

npm install react-router-dom

라우터 구성

라우터를 사용하기 위해서는 먼저 라우터를 구성해야 합니다. 가장 간단한 방법은 BrowserRouter 컴포넌트를 사용하는 것입니다. 이 컴포넌트는 앱의 최상위 컴포넌트로 사용되며, 라우터의 기능을 활성화합니다. 다음은 라우터를 구성하는 예시입니다:

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

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

위 예시에서는 / 경로에는 Home 컴포넌트를, /about 경로에는 About 컴포넌트를 매핑하고 있습니다.

링크 사용

라우터를 사용하면 페이지 간의 전환을 위해 링크를 사용할 수 있습니다. 이를 위해 Link 컴포넌트를 사용합니다. 다음은 링크를 사용하는 예시입니다:

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

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

위 예시에서는 Link 컴포넌트를 사용하여 각 페이지로의 링크를 생성하고 있습니다. 클릭하면 해당 경로로 이동됩니다.

URL 매개변수 사용

때로는 동적인 링크를 생성해야 할 때도 있습니다. 이를 위해 URL 매개변수를 사용할 수 있습니다. 다음은 URL 매개변수를 사용하는 예시입니다:

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

function User() {
  const { userId } = useParams();

  return <div>User ID: {userId}</div>;
}

위 예시에서는 useParams 훅을 사용하여 URL에서 userId 값을 추출하고 있습니다. 이를 통해 동적인 사용자 페이지를 생성할 수 있습니다.

결론

이렇게하여 리액트 라우터를 사용하여 페이지 간의 전환과 관계 관리를 쉽게 구현할 수 있습니다. 이를 통해 사용자 경험을 향상시키고 효과적인 SPA를 개발할 수 있습니다.

더 많은 정보를 원한다면, React Router 문서를 참조해주세요