리액트 프레임워크에서 라우팅을 처리하기 위해서는 React Router라는 라이브러리를 사용할 수 있습니다. React Router는 리액트 애플리케이션에서 다양한 경로에 대한 컴포넌트를 렌더링하고 관리하는 역할을 담당합니다.

먼저, React Router 패키지를 설치해야 합니다. 다음 명령을 실행하여 React Router를 설치할 수 있습니다:

npm install react-router-dom

설치가 완료되었으면, 라우터 컴포넌트를 정의하고 경로에 따라 해당 컴포넌트를 렌더링합니다. 예를 들어, 다음과 같이 App.js 파일에서 라우팅을 구현할 수 있습니다:

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './Home';
import About from './About';
import NotFound from './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 컴포넌트는 사용자의 현재 URL을 기반으로 네비게이션을 제공합니다. Route 컴포넌트는 경로와 해당 컴포넌트를 매핑시킵니다. 여기서 exact 속성은 정확히 해당 경로와 일치하는 경우에만 컴포넌트를 렌더링하라는 의미입니다.

위 예제에서는 Home, About, NotFound 컴포넌트를 사용하여 해당 경로에 대한 컨텐츠를 렌더링하고 있습니다. 각 컴포넌트는 일반적인 리액트 컴포넌트처럼 구현할 수 있습니다.

React Router를 사용하면 동적 라우팅, 중첩 라우팅, 매개변수 전달 등의 다양한 기능을 제공합니다. 자세한 내용은 React Router 공식 문서를 참조하시기 바랍니다.

참고 자료:

• React Router 공식 문서