React 16 베타 테스트 - Fiber 아키텍처 적용기

배경

회사 대시보드 프로젝트에서 복잡한 차트 렌더링 시 버벅임이 심했다. React 15.5를 쓰고 있었는데, React 16 베타가 공개되면서 Fiber 아키텍처가 이런 문제를 해결해준다는 이야기를 들었다. 개발 브랜치에서 테스트해봤다.

주요 변경사항

1. Error Boundaries

기존에는 컴포넌트 에러가 전체 앱을 멈추게 했다. 이제 componentDidCatch로 에러를 잡을 수 있다.

class ErrorBoundary extends React.Component {
  componentDidCatch(error, info) {
    this.setState({ hasError: true });
    logErrorToService(error, info);
  }

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

2. render()에서 배열 반환 가능

기존에는 무조건 하나의 루트 엘리먼트가 필요했다.

// React 15
render() {
  return (
    <div>
      <ChildA />
      <ChildB />
    </div>
  );
}

// React 16
render() {
  return [
    <ChildA key="a" />,
    <ChildB key="b" />
  ];
}

3. 성능 체감

실제로 차트 200개를 동시에 업데이트하는 테스트를 돌렸다. React 15에서는 UI가 완전히 멈췄지만, React 16에서는 다른 인터랙션이 계속 동작했다. Fiber의 비동기 렌더링 덕분이다.

마이그레이션 이슈

• React.PropTypes가 완전히 제거됐다. prop-types 패키지로 분리됨
• 일부 라이프사이클 경고 메시지가 추가됐다
• 서버 렌더링 시 data attribute 방식이 변경됐다

결론

아직 베타지만 충분히 안정적이었다. 정식 릴리즈되면 바로 프로덕션에 적용할 계획이다. 특히 Error Boundaries는 당장 필요한 기능이었다.