All files / src/chap05 ErrorRetryRoot.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { ErrorBoundary } from 'react-error-boundary';
import ErrorRetryThrow from './ErrorRetryThrow';
 
export default function ErrorRetryRoot() {
  // 오류 발생 시 실행되는 처리
  const handleFallback = ({ error, resetErrorBoundary }) => {
    const handleClick = () => resetErrorBoundary();
    return (
      <div>
        <h4>다음 오류가 발생했다.</h4>
        <p>{error.message}</p>
        <button type="button" onClick={handleClick}>
          Retry
        </button>
      </div>
    );
  };
  // 리셋 시 실행되는 처리
  const handleReset = () => console.log('Retry!!');
 
  return (
    <>
      <h3>Error Boundary의 기본</h3>
      <ErrorBoundary
        onReset={handleReset}
        fallbackRender={handleFallback}
      >
        <ErrorRetryThrow />
      </ErrorBoundary>
    </>
  );
}
 
 
 
// Code 5-3-10
// import { ErrorBoundary } from 'react-error-boundary';
// import ErrorRetryThrow from './ErrorRetryThrow';
// import ErrorFallback from './ErrorFallback';
 
// export default function ErrorRetryRoot() {
//   // 오류 발생 시 실행되는 처리
//   const handleFallback = ({ error, resetErrorBoundary }) => {
//     const handleClick = () => resetErrorBoundary();
//     return (
//       <div>
//         <h4>다음 오류가 발생했다.</h4>
//         <p>{error.message}</p>
//         <button type="button" onClick={handleClick}>
//           Retry
//         </button>
//       </div>
//     );
//   };
//   // 리셋 시 실행되는 처리
//   const handleReset = () => console.log('Retry!!');
 
//   return (
//     <>
//       <h3>Error Boundary의 기본</h3>
//       {/* 오류 발생 시 렌더링 콘텐츠를 컴포넌트로 지정 */}
//       <ErrorBoundary
//         onReset={handleReset}
//         fallbackRender={handleFallback}
//         FallbackComponent={ErrorFallback}
//       >
//         <ErrorRetryThrow />
//       </ErrorBoundary>
//     </>
//   );
// }