[Next.js] 인프런 강의 "Next.js 필수 개발 가이드 3시간 완성!" 정리(컴포넌트 오류 처리)
2024년 02월 11일 15시 42분 43초에 업로드 된 글입니다.
작성자: DandyNow
728x90
반응형
📌 error.tsx
컴포넌트에서 발생한 예상치 못한 오류 처리한다.
error.tsx는 client 컴포넌트로 만들어야 한다.
[그림 1]은 error.tsx를 적용하지 않은 경우이다.
// src/app/error.tsx
"use client"; // "use client"를 반드시 작성해야 한다.
import React from "react";
interface Props {
error: Error;
reset: () => void;
}
const ErrorPage = ({ error, reset }: Props) => {
console.log("Error : ", error); // 실제 애플리케이션에서는 콘솔 찍기 대신 로그를 영구적으로 남기면 된다.
return (
<>
<div>예상치 못한 오류가 발생하였습니다!</div>
{/* reset() 메서드를-사용자가-과도하게 사용하면 불필요한 오류 로그가 여러번 기록되고,
좋지 않은 사용자 경험을 줄 수 있다. 따라서 제한적으로 사용하는 것이 좋겠다. */}
<button className="btn" onClick={() => reset()}>
Retry
</button>
</>
);
};
export default ErrorPage;