React 16 베타 버전 테스트 후기 - Fiber 아키텍처

배경

회사 프로젝트는 React 15.5를 쓰고 있지만, 개인 프로젝트에 React 16 베타를 적용해봤다. Fiber 아키텍처가 실제로 어떤 차이를 만드는지 궁금했다.

주요 변경사항

1. Fiber 아키텍처

복잡한 리스트 렌더링에서 체감되는 성능 향상이 있었다. 특히 스크롤 인터랙션이 부드러워진 게 눈에 띄었다.

2. Error Boundaries

컴포넌트 에러 처리가 깔끔해졌다. 기존에는 전역 에러 핸들러로 처리하던 걸 컴포넌트 단위로 격리할 수 있다.

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

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

3. render() 반환 타입 확장

배열과 문자열을 직접 반환할 수 있게 됐다. 불필요한 wrapper div를 줄일 수 있다.

render() {
  return [
    <li key="A">First</li>,
    <li key="B">Second</li>
  ];
}

마이그레이션 이슈

대부분 호환성 문제는 없었다. PropTypes가 별도 패키지로 분리된 정도가 주요 변경사항이었다.

결론

정식 릴리즈 후 회사 프로젝트에도 점진적으로 적용할 계획이다. Fiber의 비동기 렌더링 기능은 아직 비활성화 상태지만, 향후 업데이트가 기대된다.