[javascript] React Router의 사용법과 라우팅 방식

22 Dec 2023

javascript

React 애플리케이션에서 여러 페이지를 관리하기 위해 React Router를 사용할 수 있습니다. React Router를 사용하면 사용자가 다른 URL을 요청했을 때 특정 컴포넌트를 렌더링하여 다른 페이지로 이동할 수 있습니다.

React Router 설치

React Router를 설치하려면 먼저 npm 또는 yarn을 사용하여 패키지를 설치해야 합니다.

npm install react-router-dom

또는

yarn add react-router-dom

기본적인 라우팅

React Router를 사용하여 간단한 라우팅을 설정해봅시다.

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

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

export default App;

위의 코드에서 BrowserRouter, Route, Switch를 사용하여 라우팅을 설정했습니다. 라우트는 path prop에 URL 경로를, component prop에 해당 URL에 렌더링될 컴포넌트를 지정합니다.

Switch 컴포넌트는 매칭되는 첫 번째 라우트만을 렌더링하므로, NotFound 컴포넌트는 어떤 경로와도 일치하지 않을 때 보여집니다.

중첩 라우팅

React Router를 사용하면 중첩된 레이아웃을 구성할 수도 있습니다. 이는 하위 URL을 위한 라우트를 정의함으로써 가능합니다.

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

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

export default App;

결론

React Router를 사용하면 React 애플리케이션에서 강력한 라우팅 기능을 구현할 수 있습니다. 이를 통해 사용자 경험을 향상시키고, 애플리케이션의 구조를 보다 효율적으로 관리할 수 있습니다.

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