React 애플리케이션에서 존재하지 않는 경로에 대한 예외 처리를 위해 404 페이지를 구현하는 방법에 대해 알아보겠습니다.

404 페이지가 필요한 이유 🧐

사용자가 존재하지 않는 페이지로 이동했을 때, 빈 화면이나 오류 메시지를 보게 된다면 사용자 경험이 저하될 수 있습니다. 이를 방지하기 위해, 존재하지 않는 경로에서는 커스텀 404 페이지를 제공하는 것이 일반적입니다.

React Router를 사용한 404 페이지 구현

1. NotFound.jsx 컴포넌트 만들기

404 페이지 전용 컴포넌트를 생성합니다.

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

const NotFound = () => {
  return (
    <div style={{ textAlign: "center", padding: "50px" }}>
      <h1>404 - 페이지를 찾을 수 없습니다.</h1>
      <p>죄송합니다. 해당 페이지는 존재하지 않거나 이동되었습니다.</p>
      <Link to="/">홈으로 돌아가기</Link>
    </div>
  );
};

export default NotFound;

2. Routes에 404 페이지 추가하기

React Router를 사용하는 경우, * 경로를 추가하면 정의되지 않은 모든 경로를 404 페이지로 연결할 수 있습니다.

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";
import NotFound from "./pages/NotFound";

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </Router>
  );
}

export default App;