React에서 JavaScript 오류 처리

오류 경계는 코드의 오류를 처리하는 데 도움이 되는 중요한 디자인 패턴입니다. 오류가 발생한 위치와 이유를 식별하고 적절하게 처리하는 데 도움이 됩니다. React를 처음 사용하거나 들어본 적이 없더라도 걱정하지 마십시오. 많은 개발자들은 아마도 그것이 무엇인지 또는 그것을 사용하는 방법을 모른 채 오류 경계를 가로질러 왔을 것입니다. 이 디자인 패턴이 무엇이며 코드 베이스에서 어떻게 사용할 수 있는지 살펴보겠습니다.

반응 오류 경계는 무엇입니까?

오류 및 예외는 모든 응용 프로그램에서 발생합니다. 잘못된 입력, 외부 문제 및 예기치 않은 동작으로 인해 발생할 수 있습니다. 버전 16 이전에는 React가 JavaScript 오류를 처리하지 못해 자주 비판을 받았습니다. React의 내부 상태를 손상시키고 다음 렌더링에서 알 수 없는 오류를 발생시키는 데 사용되는 구성 요소 내부의 JavaScript 오류. React 16은 이 문제를 해결하기 위해 오류 경계라는 새로운 개념을 도입했습니다.

오류 경계는 구성 요소 트리의 모든 위치에서 JavaScript 오류를 포착하고 해당 오류를 기록하며 대체 UI를 표시하는 React 구성 요소입니다. 이를 통해 응용 프로그램의 한 섹션을 오류 영역으로 표시할 수 있습니다. 영역 내에서 오류를 기록하고 다른 UI를 반환할 수 있습니다. 오류 경계는 렌더링 중, 수명 주기 메서드 및 그 아래 전체 트리의 생성자에서 오류를 포착합니다. 그러나 다음에 대한 오류는 포착하지 않습니다.

이벤트 처리기

비동기 코드

서버측 렌더링

하위가 아닌 오류 경계 자체에서 발생하는 오류

React에서 오류 경계를 만드는 방법은 무엇입니까?

"버그가 있는"구성 요소를 만드는 것으로 시작하겠습니다.

페이지/BuggyCounter.jsx

import React from 'react';

class BuggyCounter extends React.Component {
  state = {
    counter: 0,
  };

  handleClick = () => {
    this.setState({
      counter: this.state.counter + 1,
    });
  };

  render() {
    if (this.state.counter === 5) {
      // Simulate an error!
      throw new Error('Simulated error.');
    }
    return (
      <div>
        <h1>{this.state.counter}</h1>
        <button onClick={this.handleClick}>+</button>
      </div>
    );
  }
}

export default BuggyCounter;

이것을 실행하고 5에 도달할 때까지 + 버튼을 클릭하면 오류(이 경우 시뮬레이션됨)로 인해 구성 요소 자체가 완전히 마운트 해제되고 사용자에게 빈 페이지가 남게 됩니다(이 동작은 개발 서버). 이것은 사용자가 다음에 무엇을 해야할지 모를 수 있으므로 혼란스러울 수 있습니다. 또한 콘솔에 오류 메시지가 표시됩니다.



오류 경계를 사용하여 이를 수정해 보겠습니다. 계정을 만들기 전에 다음 사항에 유의해야 합니다.

클래스 구성 요소만 오류 경계가 될 수 있습니다.

클래스 구성 요소는 수명 주기 메서드static getDerivedStateFromError() 또는 componentDidCatch() 중 하나(또는 둘 다)를 정의하는 경우 오류 경계가 됩니다.

static getDerivedStateFromError()를 사용하여 오류가 발생한 후 대체 UI를 렌더링합니다.

componentDidCatch()를 사용하여 오류 정보를 기록합니다.

이제 오류 경계를 만들어 봅시다.

구성 요소/ErrorBoundary.js

import React from 'react';

class ErrorBoundary extends React.Component {
  state = {
    error: null,
  };

  static getDerivedStateFromError(error) {
    // Update state so next render shows fallback UI.
    return { error: error };
  }

  componentDidCatch(error, info) {
    // Log the error to an error reporting service
    // Logging to console for demo purposes
    console.log(error, info);
  }

  render() {
    if (this.state.error) {
      // You can render any custom fallback UI
      return <p>Something broke</p>;
    }
    return this.props.children;
  }
}

export default ErrorBoundary;

그런 다음 ErrorBoundary를 BuggyCounter로 감싸서 오류를 포착합니다.

App.jsx

import React from 'react';
import './App.css';
import ErrorBoundary from './components/ErrorBoundary';
import BuggyCounter from './pages/BuggyCounter';
function App() {
  return (
    <div className="App">
      <ErrorBoundary>
        <BuggyCounter />
      </ErrorBoundary>
    </div>
  );
}

export default App;

우리의 앱은 이제 JavaScript 오류를 정상적으로 처리하고 완전히 충돌하는 대신 사용자에게 친숙한 UI를 표시합니다.

React 오류 경계를 사용하는 이유는 무엇입니까?

오류는 소프트웨어 구축의 불가피한 부분입니다. 따라서 오류 처리 논리를 일반 구성 요소에 혼합하는 대신 오류 경계로 특수 제작된 구성 요소를 만드는 것이 좋습니다. 그러나 오류 경계는 try/catch 문과 직접적으로 경쟁하지 않으며 이를 대체해서는 안 됩니다. 둘 다 React에서 오류를 처리하기 위한 강력한 전략으로 필요합니다. 오류 경계는 React 구성 요소의 3개 위치에서 발생하는 오류를 가로채기 위해서만 설계되었음을 기억하십시오.

렌더링 단계 중

수명 주기 방법에서

생성자에서

마지막 말

React에서 오류를 처리하는 방법에 대한 이 기사를 읽어 주셔서 감사합니다. 이것이 오류 경계와 프로젝트에서 어떻게 도움이 될 수 있는지에 대해 더 많이 이해하는 데 도움이 되었기를 바랍니다. 오류 경계에 대한 자세한 내용은 offical documentation을 확인하십시오.
React에 대해 더 자세히 알고 싶다면 React에서 100% 온라인 교육을 제공하고 있습니다. Apply here을 참조하십시오.