React 16 Fiber 아키텍처로 마이그레이션하며

배경

회사 프로젝트에서 React 15.4를 사용 중이었는데, 16 정식 버전이 릴리즈되면서 마이그레이션을 진행했다. Fiber라는 새로운 reconciliation 엔진이 적용되어 렌더링 성능이 개선된다는 내용이 눈에 띄었다.

주요 변경사항

에러 바운더리

가장 먼저 적용한 것은 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;
  }
}

반환 타입 확장

render()에서 배열과 문자열을 직접 반환할 수 있게 되었다. 불필요한 래퍼 div를 제거할 수 있어서 마크업이 깔끔해졌다.

render() {
  return [
    <li key="a">항목 1</li>,
    <li key="b">항목 2</li>
  ];
}

마이그레이션 이슈

PropTypes 분리

React.PropTypes가 deprecated되어 별도 패키지로 분리되었다. 프로젝트 전체에서 import 구문을 수정해야 했다.

npm install --save prop-types

서버사이드 렌더링

ReactDOMServer 관련 메서드 일부가 변경되었지만, 우리 프로젝트에서는 SSR을 사용하지 않아 영향이 없었다.

성능 측정

크롬 개발자도구로 측정한 결과, 복잡한 리스트 렌더링 시나리오에서 체감할 정도는 아니지만 약간의 개선이 있었다. Fiber의 우선순위 기반 렌더링이 향후 더 큰 이점을 가져올 것으로 기대된다.

결론

마이그레이션 자체는 반나절 정도면 충분했다. Error Boundary만으로도 업그레이드 가치가 있다고 판단된다. 번들 크기도 15.x 대비 약간 줄었다.