<aside>

</aside>

1️⃣ ErrorBoundary

자바스크립트 오류를 자식 컴포넌트 트리의 어느 곳에서든 잡아내고, 그 오류를 기록하며, 충돌한 컴포넌트 트리 대신 대체 UI를 표시하는 React 컴포넌트

= 하위 컴포넌트 트리의 어디에서든 자바스크립트 에러를 기록하며, 깨진 컴포넌트 트리 대신 fallback UI를 보여주는 React 컴포넌트

<ErrorBoundary>
	<Compoents />
</ErrorBoundary>

→ 렌더링 도중, 생명주기 메서드 및 그 아래에 있는 전체 트리에서 에러를 잡아냄 (throw 된 error를 catch 하도록 동작)

• catch {} 구문과 유사하게 동작하지만, 컴포넌트에 적용하며,
• 오직 클래스 컴포넌트만이 에러 바운더리가 될 수 있음.

에러바운더리 생김새

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

  static getDerivedStateFromError(error) {
    // 다음 렌더링에서 폴백 UI가 보이도록 상태를 업데이트 합니다.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // 에러 리포팅 서비스에 에러를 기록할 수도 있습니다.
    logErrorToMyService(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // 폴백 UI를 커스텀하여 렌더링할 수 있습니다.
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}

<aside>

• getDerivedStateFromError(): 이 생명주기 메서드는 오류가 발생한 후 대체 UI를 렌더링한다. 이는 렌더링 단계에서 호출되므로 부작용(side effect)은 허용되지 않는다.
• componentDidCatch(): 이 메서드는 오류 정보를 기록하는 데 사용된다. 이는 커밋 단계에서 호출되므로 부작용은 허용된다. </aside>

에러바운더리가 포착하지 않는 에러

• 이벤트 핸들러 → try/catch문 사용해서 해결할 것
• 비동기적 코드