Overview

해당 절에서는 지금까지 다루지 않은 errorElement, loader, action, lazy 등의 속성에 대해 설명

errorElement 속성 - 루트 랜더링 시 예외 포착

errorElement 속성은 라우팅 시 예외가 발생했을 때 표시해야 할 콘텐츠(오류 컴포넌트)를 나타냄

해당 속성을 이해하기 위해 /book/:isbn 루트(BookPage 컴포너트)에서 루트 매개변수 :isbn이 잘못된 형식일때의 예시로 알아보자

→ BookPage 컴포넌트 대신 InvalidParamsPage 컴포넌트를 표시

BookPage 컴포넌트 수정

:isbn 매개변수의 값을 판단, 범위를 벗어난 값일 경우 RangeError 예외를 발생 시키보자

BookPage.jsx

import { useParams } from 'react-router-dom';

export default function BookPage() {
  const { isbn = '979-1-1583-9517-9' } = useParams();
  if (!/979-1[0-9]{2, 7}-[0-9]{2, 7}-[0-9X]/.test(isbn)) {
    throw new RangeError('ISBN is invalid!!');
  }
  
  return (<p>ISBN 코드 {isbn}의 페이지입니다.</p>);
}

• isbn 값이 정규표현식에 맞지 않으면 RangeError라는 오류 객체를 생성 이때, RangeError는 JavaScript의 내장 오류 객체 중 하나

루트 정의 수정

/book/:isbn 루트에 errorElement 속성을 추가

값은 element 속성과 마찬가지로 React 요소

routesParam.jsx