React Router는 React 애플리케이션 내에서 라우팅을 담당하는 라이브러리입니다. 이 라이브러리를 사용하면 URL을 기반으로 다른 페이지 또는 컴포넌트로 전환할 수 있습니다.

하지만 때로는 라우팅 중에 예외가 발생하거나 오류가 발생할 수 있습니다. 이럴 때는 적절한 예외 처리와 에러 핸들링 방법을 알고 있어야 합니다.

예외 처리

React Router에서 예외를 처리하기 위해 다양한 방법을 사용할 수 있습니다. 예를 들어, Switch 컴포넌트를 사용하여 정의되지 않은 경로에 대한 예외 처리를 할 수 있습니다.

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

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

위의 코드에서 /about 경로에 대한 라우터가 정의되어 있지 않을 경우 NotFound 컴포넌트가 렌더링됩니다.

에러 핸들링

React Router는 에러 핸들링을 위한 ErrorBoundary 컴포넌트를 제공합니다. 이 컴포넌트는 자식 컴포넌트에서 발생하는 에러를 감지하고 대체 컨텐츠를 렌더링할 수 있도록 도와줍니다.

import { ErrorBoundary } from 'react-error-boundary';

const App = () => {
  return (
    <ErrorBoundary fallbackRender={({ error }) => <ErrorPage error={error} />}>
      <Router>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route component={NotFound} />
        </Switch>
      </Router>
    </ErrorBoundary>
  );
};

ErrorBoundary 컴포넌트는 fallbackRender 함수를 prop으로 받아 에러가 발생하면 이 함수를 호출하여 에러 페이지 컴포넌트를 렌더링합니다.

정리

React Router를 사용할 때 예외 처리와 에러 핸들링을 제대로 구현하는 것은 중요합니다. Switch 컴포넌트로 정의되지 않은 경로에 대한 예외 처리를 할 수 있으며, ErrorBoundary 컴포넌트로 에러 핸들링을 할 수 있습니다.

이러한 예외 처리와 에러 핸들링은 사용자 경험을 향상시키고 애플리케이션의 안정성을 높여줍니다.

참고 자료

• React Router 공식 문서
• React Error Boundary 공식 문서