1. 개요

오류 발생 시 미리 만들어둔 오류페이지를 보여주는 것

2. 사용법

에러가 발생한 대상과 같은 위치에 에러가 발생했을 때 보여줄 페이지 컴포넌트인 error.tsx(jsx)를 만들어준다. (하위 폴더까지 적용)

• error.tsx

"use client"

import { useEffect } from "react"
import { useRouter } from "next/navigation";

export default function Error({error, reset,} : {error:Error; reset:()=> void;}) {
    useEffect(() => {
        console.error(error.message)
    },[error])

    const router = useRouter();

    return (
        <div>
            <h3>오류가 발생했습니다.</h3>
            <button onClick={()=> reset()}>다시 시도</button> // 해결안될 수도 있음
            <button onClick={()=> {
                router.refresh(); //현재 페이지에 필요한 서버 컴포넌트들을 다시 불러옴
                reset(); // 에러 상태를 초기화, 컴포넌트들을 다시 랜더링
                }}>다시 시도</button>
        </div>
    )
}

1. use client로 클라이언트 페이지로 설정(서버나 클라이언트 환경 둘다 대응 가능)
2. error props로 에러 메세지 출력가능 (이때 type은 error로 설정)
3. reset props가 제공 , 에러가 발생한 페이지를 복구하기 위해 다시 한번 컴포넌트를 랜더링시켜본다. - 클라이언트 측에서만 리랜더링이 실행되어 서버측 오류이면 해결이 되지않는다.(router함수를 사용하여 필요한 컴포넌트만 다시 불러오기)
4. router.refresh() 함수를 실행시키고 reset() 함수를 실행시키기 위해 startTransition 함수를 사용하면 된다.

startTransition

상태 업데이트나 UI 전환이 비동기적이고, 덜 중요한 작업으로 처리되도록 만들어 주는 API

콜백 함수를 인수로 전달받아 콜백함수 안에 ui를 변경시키는 작업을 일괄적으로 실행