오류 경계란 무엇입니까?

애플리케이션을 구축하는 동안 오류는 불가피합니다. API, UI 또는 기타 여러 위치에서 올 수 있습니다.

이러한 오류를 적절하게 처리하고 이러한 오류에도 불구하고 좋은 UX를 유지하는 것이 매우 중요합니다.

Error Boundary는 React에서 오류를 처리하는 방법 중 하나입니다.

---

오류 경계는 어떻게 도움이 되나요?

이를 이해하기 위해 오류 경계가 도입되기 전의 상황을 이해해 보겠습니다.

오류 경계 이전에는 구성 요소 내부에서 발생하는 오류가 결국 전파되어 UI가 깨지거나 흰색 화면이 렌더링되었습니다.

이로 인해 정말 나쁜 UX가 발생했습니다.

오류 경계는 UI가 깨지거나 흰색 화면이 표시되는 대신 이러한 오류를 처리하고 대체 UI를 표시하는 데 도움이 됩니다.

---

오류 경계를 사용하는 방법은 무엇입니까?

React v16에서는 공식적으로 Error Boundary를 도입했습니다.

애플리케이션을 래핑하는 데 사용할 수 있는 클래스 기반 구성 요소입니다.

애플리케이션에 오류가 있는 경우에 표시할 대체 UI를 허용하며, 단순히 하위 구성요소를 렌더링하여 애플리케이션의 정상적인 흐름을 재개합니다.

이것이 React Documentation에서 권장하는 사용 방법입니다.

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // Example "componentStack":
    //   in ComponentThatThrows (created by App)
    //   in ErrorBoundary (created by App)
    //   in div (created by App)
    //   in App
    logErrorToMyService(error, info.componentStack);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return this.props.fallback;
    }

    return this.props.children;
  }
}

---

React의 Error Boundary에 어떤 문제가 있나요?

다음에서 발생하는 오류를 포착할 수 없습니다.

• 이벤트 핸들러(이러한 오류는 try-catch 블록으로 처리해야 함)
• 비동기 코드(API, setTimeout, requestAnimationFrame 등)
• 서버 측 렌더링
• Error Boundary 자체에서 발생하는 오류
• 기능적 구성 요소에서는 작동하지 않습니다. 몇 가지 코드를 변경하면 작동하게 할 수 있습니다.
• 내부에는 후크를 사용할 수 없습니다.

---

해결책은 무엇입니까?

기존 Error Boundary 구성 요소 위에 래퍼인 반응 오류 경계라는 npm 패키지가 있습니다.

이 패키지를 사용하면 기존 오류 경계 구성요소에서 직면한 모든 문제를 극복할 수 있습니다.

---

사용 방법?

전체 애플리케이션을 로 래핑하거나 개별 구성요소를 .

로 래핑할 수 있습니다.

구현의 세분성은 귀하에게 달려 있습니다.

사용방법을 알아보겠습니다.

import React from 'react';
import { ErrorBoundary } from "react-error-boundary";

const App = () => {
return Something went wrong}>
/* rest of your component */

}

ErrorBoundary를 사용하는 가장 간단한 예입니다. 이 라이브러리에는 더 많은 내용이 있습니다.

---

반응 오류 경계 API 이해

다양한 시나리오를 통해 API를 이해해 보겠습니다.

1. 애플리케이션 오류에 대한 일반 대체 UI를 표시하고 싶습니다.

 import React from 'react';
 import { ErrorBoundary } from "react-error-boundary";

 const App = () => {
 return Something went wrong}>
 /* rest of your component */
 
 }

2. 대체 구성요소에 특정 오류 세부정보를 표시하고 싶습니다.

 import React from 'react';
 import { ErrorBoundary } from "react-error-boundary";

 function fallbackRender({ error, resetErrorBoundary }) {
   // Call resetErrorBoundary() to reset the error boundary and retry the render.
   return (
     

       
Something went wrong:
       
{error.message}
     
   );
 }

 const App = () => {
 return  {
     // Reset the state of your app so the error doesn't happen again
   }}
 >
 /* rest of your component */
 
 }

); } const 앱 = () => { { // 오류가 다시 발생하지 않도록 앱 상태를 재설정합니다. }} > /* 나머지 구성요소 */ }

fallback 또는 fallbackRender 대신 React 구성요소를 사용할 수도 있습니다.

 import React from 'react';
 import { ErrorBoundary } from "react-error-boundary";

 const Fallback = ({ error, resetErrorBoundary }) => {
   // Call resetErrorBoundary() to reset the error boundary and retry the render.
   return (
     

       
Something went wrong:
       
{error.message}
     
   );
 }

 const App = () => {
 return  {
     // Reset the state of your app so the error doesn't happen again
   }}
 >
 /* rest of your component */
 
 }

); } const 앱 = () => { { // 오류가 다시 발생하지 않도록 앱 상태를 재설정합니다. }} > /* 나머지 구성요소 */ }

삼. 내 오류를 기록하고 싶습니다.

 import React from 'react';
 import { ErrorBoundary } from "react-error-boundary";

 const logError = (error: Error, info: { componentStack: string }) => {
   // Do something with the error, e.g. log to an external API
 };

 const Fallback = ({ error, resetErrorBoundary }) => {
   // Call resetErrorBoundary() to reset the error boundary and retry the render.
   return (
     

       
Something went wrong:
       
{error.message}
     
   );
 }
 // You can use fallback / fallbackRender / FallbackComponent anything
 const App = () => {
 return  {
     // Reset the state of your app so the error doesn't happen again
   }}
 >
 /* rest of your component */
 
 }

); } // fallback / fallbackRender / FallbackComponent 무엇이든 사용할 수 있습니다. const 앱 = () => { { // 오류가 다시 발생하지 않도록 앱 상태를 재설정합니다. }} > /* 나머지 구성요소 */ }

4. 이벤트 핸들러 및 비동기 코드에서 오류를 포착하고 싶습니다.

 import { useErrorBoundary } from "react-error-boundary";

 function Example() {
   const { showBoundary } = useErrorBoundary();
   const getGreeting = async(name) => {
     try {
         const response = await fetchGreeting(name);
         // rest of your code
     } catch(error){
          // Show error boundary
         showBoundary(error);
     }
   }
   useEffect(() => {
    getGreeting()
   });

   return 
 }

---

몇 가지 문제

ErrorBoundary는 클라이언트 구성 요소입니다. 직렬화 가능한 props만 전달하거나 "클라이언트 사용"이 있는 파일에서만 사용할 수 있습니다. 지령.

1. 직렬화 가능한 prop이 무엇인가요?

Serilzable prop은 바이트 스트림을 원래 prop으로 다시 변환할 수 있는 방식으로 바이트 스트림으로 변환할 수 있음을 의미합니다.

Javascript에서 이를 수행하는 일반적인 방법은 JSON.stringify() 및 JSON.parse()입니다.

2. "클라이언트 사용"을 사용하는 방법; 지령?

파일 상단에 간단히 언급하세요.

"use client";

---

사용할 수 있는 몇 가지 변형이 더 있습니다. 하지만 이 기사는 시작하기에 충분합니다.

여기에서 전체 문서를 확인하세요.

도움이 되셨다면 댓글로 알려주세요.

즐거운 코딩하세요!