20강. URL 파라미터와 404 페이지

?1. 이번 강의에서 해결할 문제

각 게임의 상세 페이지를 별도 파일로 만들 수는 없습니다. URL의 게임 id로 데이터를 찾고, 존재하지 않는 게임이나 경로는 명확히 안내해야 합니다.

✓2. 학습 목표

• 동적 Route의 URL 파라미터를 읽는다.
• 목록에서 상세 페이지로 안전하게 링크한다.
• 데이터 없음과 경로 없음의 404를 처리한다.

◇3. 핵심 개념

경로의 :gameId는 동적 세그먼트입니다. useParams로 읽은 값은 없을 수도 있으므로 데이터 조회 결과를 확인해야 합니다. path="*"는 앞의 어떤 경로와도 일치하지 않은 주소를 처리합니다.

“경로가 없음”과 “경로 형식은 맞지만 해당 게임이 없음”은 발생 위치가 다르지만 사용자에게는 모두 돌아갈 길을 제공해야 합니다.

</>4. 단계별 코드 예시

파일 경로: game-release-dashboard/src/App.tsx

import { Route, Routes } from 'react-router';
import { GameDetailPage } from './pages/GameDetailPage';
import { HomePage } from './pages/HomePage';
import { NotFoundPage } from './pages/NotFoundPage';

export default function App() {
  return (
    <Routes>
      <Route path="/" element={<HomePage />} />
      <Route path="/games/:gameId" element={<GameDetailPage />} />
      <Route path="*" element={<NotFoundPage />} />
    </Routes>
  );
}

파일 경로: game-release-dashboard/src/pages/GameDetailPage.tsx

import { Link, useParams } from 'react-router';
import { games } from '../data/games';

export function GameDetailPage() {
  const { gameId } = useParams();
  const game = games.find((item) => item.id === gameId);

  if (!game) {
    return (
      <main>
        <h1>게임을 찾을 수 없습니다</h1>
        <Link to="/">목록으로 돌아가기</Link>
      </main>
    );
  }

  return (
    <main>
      <Link to="/">← 목록</Link>
      <h1>{game.title}</h1>
      <p>{game.platform} · {game.score}점</p>
    </main>
  );
}

파일 경로: game-release-dashboard/src/components/GameCard.tsx

<Link to={'/games/' + game.id}>상세 보기</Link>

→5. 코드가 동작하는 이유

/games/star-harbor는 :gameId 자리에 문자열을 넣어 상세 Route와 일치합니다. useParams가 그 값을 제공하고 find가 같은 id의 객체를 찾습니다. 일치하는 게임이 없으면 접근 전에 조기 반환하므로 undefined 속성을 읽지 않습니다.

!6. 자주 하는 실수와 해결법

• 파라미터가 항상 있다고 단언: undefined와 잘못된 id를 처리합니다.
• 제목을 URL 키로 사용: 공백·변경·중복 문제가 있으므로 안정적인 id를 씁니다.
• 404 Route를 위에 배치: 구체적인 경로 뒤 마지막에 둡니다.
• 404에서 돌아갈 링크 누락: 사용자가 막히지 않도록 홈이나 목록 링크를 제공합니다.

✎7. 직접 실습

브라우저 주소에 존재하는 id, 존재하지 않는 id, 완전히 다른 경로를 각각 입력하세요. 두 종류의 실패 화면과 목록 복귀 링크가 올바른지 확인하세요.

?8. 이해 점검 질문 3개

1. :gameId와 실제 URL 값은 어떻게 연결되나요?
2. 게임 제목보다 id를 경로에 쓰기 좋은 이유는 무엇인가요?
3. 데이터 없음과 경로 없음은 코드에서 각각 어디서 처리하나요?

■9. 핵심 요약

동적 URL은 하나의 상세 컴포넌트로 여러 게임을 표현합니다. 파라미터와 조회 결과를 검사하고 모든 실패 화면에 복귀 경로를 제공합니다.