React 16 파이버 아키텍처와 componentDidCatch

React 16 도입 배경

회사 프로젝트에서 React 15.6을 사용 중이었는데, React 16이 정식 릴리즈되면서 업그레이드를 진행했다. 가장 큰 변화는 내부적으로 파이버 아키텍처가 도입된 점이지만, 실무에서 체감할 수 있는 건 Error Boundary였다.

Error Boundary 도입

기존에는 컴포넌트에서 에러가 발생하면 전체 앱이 크래시되는 문제가 있었다. 이를 해결하기 위해 componentDidCatch 라이프사이클을 활용한 Error Boundary를 구현했다.

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

  componentDidCatch(error, info) {
    this.setState({ hasError: true });
    // 로깅 서비스로 에러 전송
    logErrorToService(error, info);
  }

  render() {
    if (this.state.hasError) {
      return <h1>문제가 발생했습니다.</h1>;
    }
    return this.props.children;
  }
}

적용 결과

주요 페이지 컴포넌트를 ErrorBoundary로 감싸서 배포했다. 실제로 써드파티 라이브러리에서 예상치 못한 에러가 발생했을 때, 해당 영역만 폴백 UI를 보여주고 나머지 앱은 정상 작동했다.

<ErrorBoundary>
  <UserDashboard />
</ErrorBoundary>

파이버 아키텍처로 인한 성능 개선은 체감하기 어려웠지만, Error Boundary만으로도 업그레이드 가치가 충분했다. 번들 사이즈도 기존 대비 약간 줄어든 것으로 확인됐다.