정의

<aside> 📌 <Suspense> lets you display a fallback until its children have finished loading.

</aside>

<aside> 🦜 <Suspense>는 children 요소의 로딩이 끝날 때까지 fallback을 보여줍니다.

</aside>

React 16에서 처음 소개되고, 테스트 버전으로 사용할 수 있었던 컴포넌트이다.

React 18에서 정식 출시되었으며, 공식적으로 기능을 제공한다.

렌더링이 오래 걸리거나, dataFetch가 필요한 컴포넌트가 존재할 때, 이것을 선언형으로 표현할 수 있게 해주는 역할

사용 방법

<ErrorBoundary fallback={<ErrorPage />}>
	<Suspense fallback={<Loading />}>
	  <SomeComponent />
	</Suspense>
</ErrorBoundary>

• ErrorBoundary는 현재 공식적으로는 class 메소드만 제공하고 있기 때문에, 함수형 컴포넌트에서 사용하기 위해서는 리액트에서 제공하는 라이브러리를 사용하거나, 직접 ErrorBoundary.ts 파일을 생성하면 된다.

class ErrorBoundary extends Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = initialState;
  }

  static getDerivedStateFromError(error: Error) {
    return { hasError: true, error };
  }

  resetQuery = () => {
    const { onReset } = this.props;
    onReset?.();
    this.setState(initialState);
  };

  render() {
    const { hasError, error } = this.state;
    const { children, fallback } = this.props;
    if (hasError && error) {
      return fallback({ reset: this.resetQuery });
    }

    return children;
  }
}

export default ErrorBoundary;