React는 컴포넌트의 생명주기를 관리하고 예외를 처리하는 데 사용되는 componentDidCatch과 같은 라이프사이클 메소드를 제공합니다.

라이프사이클 메소드 소개

라이프사이클 메소드는 컴포넌트가 생성, 렌더링, 업데이트, 파괴되는 과정을 다양한 시점에 훅 형태의 메소드로 제어할 수 있게 해줍니다.

가장 인기 있는 두 가지 라이프사이클 메소드는 다음과 같습니다.

• componentDidMount: 컴포넌트가 마운트되고 난 후에 호출됩니다. 주로 외부 데이터를 불러오거나 구독을 설정하기 위한 용도로 사용됩니다.
• componentDidUpdate: 컴포넌트가 업데이트되고 난 후에 호출됩니다. 주로 이전 상태와 비교하여 DOM에 대한 업데이트를 진행하는 데 사용됩니다.

componentDidCatch 사용하기

componentDidCatch은 컴포넌트의 자식 컴포넌트에서 발생한 예외를 처리할 때 사용됩니다. 아래는 componentDidCatch를 사용한 예제입니다.

import React, { Component } from 'react';

class ErrorBoundary extends Component {
  state = { hasError: false }

  componentDidCatch(error, info) {
    this.setState({ hasError: true });
    console.error('Error caught by ErrorBoundary:', error, info);
  }

  render() {
    if (this.state.hasError) {
      return <div>Something went wrong.</div>;
    }
    return this.props.children;
  }
}

export default ErrorBoundary;

위 코드는 ErrorBoundary라는 컴포넌트를 만들어 자식 컴포넌트에서 발생한 예외를 처리하는 방법을 보여줍니다.

마치며

라이프사이클 메소드를 사용하여 컴포넌트의 생명주기를 제어하고, componentDidCatch를 통해 예외를 처리하는 방법을 배웠습니다. 이를 통해 더욱 견고하고 안정적인 React 애플리케이션을 개발할 수 있게 되었습니다.

더 많은 정보를 얻고 싶으시다면, React 공식 문서를 참고해보세요.