# All files / src/chap05 ErrorRetryRoot.js

0% Statements 0/7
100% Branches 0/0
0% Functions 0/4
0% Lines 0/5

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    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>
    //     </>
    //   );
    // }