리액트 라우터로 SPA 구축하기

byCode Keeper •


리액트 라우터로 SPA 구축하기


리액트(React)는 사용자 인터페이스를 구축하기 위한 자바스크립트 라이브러리로, 컴포넌트 기반의 구조를 통해 복잡한 애플리케이션을 효율적으로 관리할 수 있습니다. 싱글 페이지 애플리케이션(SPA)은 단일 HTML 페이지로 구성된 웹 애플리케이션으로, 페이지 간 이동 시 전체 페이지를 다시 로드하지 않고 동적으로 콘텐츠를 갱신하여 사용자 경험을 향상시킵니다. 리액트 라우터(React Router)는 이러한 SPA를 구축하는 데 필수적인 라이브러리로, 클라이언트 측 라우팅을 쉽게 구현할 수 있도록 도와줍니다.


리액트 라우터 소개


리액트 라우터는 리액트 애플리케이션에 라우팅 기능을 추가하는 데 사용되는 라이브러리입니다. 이를 통해 URL 경로에 따라 다른 컴포넌트를 렌더링하고, 페이지 간의 내비게이션을 관리할 수 있습니다.


리액트 라우터의 주요 기능

  • 라우팅 설정: 다양한 경로에 따라 컴포넌트를 렌더링할 수 있습니다.
  • 내비게이션 링크: 페이지 간의 이동을 위한 링크를 쉽게 생성할 수 있습니다.
  • 중첩 라우팅: 중첩된 경로와 해당 컴포넌트를 관리할 수 있습니다.
  • 프로그램적 내비게이션: 자바스크립트 코드에서 경로를 변경할 수 있습니다.

리액트 라우터 설치 및 기본 설정


리액트 라우터를 사용하려면 먼저 패키지를 설치해야 합니다. npm 또는 yarn을 사용하여 설치할 수 있습니다.


npm install react-router-dom

설치가 완료되면, 애플리케이션의 진입점 파일에서 라우터를 설정할 수 있습니다.


import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import App from './App';
import Home from './Home';
import About from './About';

ReactDOM.render(
  <Router>
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route component={App} />
    </Switch>
  </Router>,
  document.getElementById('root')
);

위 코드에서는 BrowserRouter, Route, Switch를 사용하여 기본적인 라우팅을 설정하였습니다. Switch는 첫 번째로 일치하는 Route를 렌더링하며, exact 키워드는 경로가 정확히 일치할 때만 해당 컴포넌트를 렌더링합니다.


컴포넌트 간 내비게이션


리액트 라우터를 사용하면 Link 컴포넌트를 사용하여 내비게이션 링크를 생성할 수 있습니다. Link는 HTML의 <a> 태그와 유사하게 작동하지만, 페이지를 새로 고치지 않고 클라이언트 측에서 경로를 변경합니다.


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

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

export default Navbar;

위 코드에서는 Link 컴포넌트를 사용하여 내비게이션 바를 구성하였습니다.


중첩 라우팅


리액트 라우터를 사용하면 중첩된 경로와 컴포넌트를 쉽게 관리할 수 있습니다. 이를 통해 복잡한 애플리케이션의 라우팅 구조를 체계적으로 구성할 수 있습니다.


import React from 'react';
import { Route, Link, useRouteMatch } from 'react-router-dom';

function Topics() {
  let { path, url } = useRouteMatch();

  return (
    <div>
      <h2>Topics</h2>
      <ul>
        <li>
          <Link to={`${url}/components`}>Components</Link>
        </li>
        <li>
          <Link to={`${url}/props-v-state`}>Props v. State</Link>
        </li>
      </ul>

      <Route path={`${path}/:topicId`}>
        <Topic />
      </Route>
      <Route exact path={path}>
        <h3>Please select a topic.</h3>
      </Route>
    </div>
  );
}

function Topic() {
  let { topicId } = useRouteMatch().params;
  return <h3>Requested topic ID: {topicId}</h3>;
}

export default Topics;

위 코드에서는 useRouteMatch 훅을 사용하여 현재 경로와 URL을 얻고, 중첩된 경로에 따라 Topic 컴포넌트를 렌더링합니다.


프로그래밍 방식의 내비게이션


리액트 라우터는 useHistory 훅을 사용하여 자바스크립트 코드에서 프로그래밍 방식으로 경로를 변경할 수 있습니다.


import React from 'react';
import { useHistory } from 'react-router-dom';

function Login() {
  let history = useHistory();

  function handleLogin() {
    // 로그인 로직 수행 후
    history.push('/dashboard');
  }

  return (
    <div>
      <button onClick={handleLogin}>Login</button>
    </div>
  );
}

export default Login;

위 코드에서는 useHistory 훅을 사용하여 로그인 버튼 클릭 시 대시보드 페이지로 이동합니다.


리액트 라우터의 고급 기능


리액트 라우터는 기본적인 라우팅 외에도 다양한 고급 기능을 제공합니다.


URL 파라미터


URL 파라미터를 사용하여 경로에 동적인 값을 전달할 수 있습니다.


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

function User() {
  let { userId } = useParams();
  return <h2>User ID: {userId}</h2>;
}

function App() {
  return (
    <Router>
      <Route path="/user/:userId" component={User} />
    </Router>
  );
}

export default App;

위 코드에서는 useParams 훅을 사용하여 URL 파라미터를 가져와 User 컴포넌트에서 사용합니다.


리다이렉트


Redirect 컴포넌트를 사용하여 특정 경로로 리다이렉트할 수 있습니다.


import React from 'react';
import { Redirect, Route, Switch } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/home" component={Home} />
        <Redirect from="/old-home" to="/home" />
      </Switch>
    </Router>
  );
}

export default App;

위 코드에서는 /old-home 경로로 접근하면 /home 경로로 리다이렉트됩니다.


주요 포인트 요약 및 추가 학습 자료


이 포스팅에서는 리액트 라우터를 사용하여 싱글 페이지 애플리케이션(SPA)을 구축하는 방법에 대해 살펴보았습니다. 리액트 라우터를 사용하면 URL 경로에 따라 다양한 컴포넌트를 렌더링하고, 중첩 라우팅 및 프로그래밍 방식의 내비게이션을 쉽게 구현할 수 있습니다. 추가로 학습할 자료는 다음 링크를 참고하시기 바랍니다:


Tags:
다음 이전