React 16 fiber reconciler 도입 후 성능 개선 사례

배경

회사 대시보드 프로젝트에서 React 15.5를 사용 중이었는데, 1000개 이상의 행을 가진 테이블 렌더링 시 스크롤이 버벅이는 이슈가 있었다. React 16 beta가 나왔길래 테스트 환경에서 적용해봤다.

주요 변화

React 16의 fiber reconciler는 렌더링 작업을 청크 단위로 나눠서 처리한다. 브라우저의 메인 스레드가 블로킹되지 않도록 우선순위를 조정하는 방식이다.

기존 코드는 그대로 두고 React 버전만 업그레이드했는데도 체감 성능이 개선됐다.

// 기존 코드 변경 없이 동작
class DataTable extends React.Component {
  render() {
    return (
      <table>
        <tbody>
          {this.props.data.map(row => (
            <tr key={row.id}>
              <td>{row.name}</td>
              <td>{row.value}</td>
            </tr>
          ))}
        </tbody>
      </table>
    );
  }
}

측정 결과

Chrome DevTools Performance 탭으로 측정했다.

• React 15.5: 초기 렌더링 약 280ms, 프레임 드롭 빈번
• React 16.0: 초기 렌더링 약 240ms, 스크롤 시 프레임 유지

숫자상 차이는 크지 않지만, 사용자 체감 성능은 확실히 개선됐다. 특히 스크롤하거나 입력하는 동안 UI가 멈추는 현상이 줄었다.

Error Boundary 추가

React 16에서 새로 추가된 Error Boundary도 함께 적용했다.

class ErrorBoundary extends React.Component {
  state = { hasError: false };

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

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

이전에는 컴포넌트 에러가 전체 앱을 크래시시켰는데, 이제는 부분적으로 처리할 수 있게 됐다.

결론

React 16 정식 릴리즈 되면 프로덕션에 바로 적용할 예정이다. fiber의 비동기 렌더링은 아직 활성화되지 않았지만, 기본 성능 개선만으로도 충분히 가치가 있었다.