React 16 베타 테스트 - Fiber 아키텍처 체험기

배경

사내 어드민 대시보드에서 차트 렌더링 시 버벅임이 심했다. 데이터 업데이트마다 전체 컴포넌트 트리가 블로킹되는 게 문제였다. React 16 베타가 공개됐다는 소식을 듣고 Fiber 아키텍처가 이 문제를 해결해줄 수 있을지 테스트해봤다.

적용 과정

npm install react@next react-dom@next

별도 코드 변경 없이 패키지만 교체했다. React 15.5에서 16.0.0-beta.5로 업그레이드했는데 breaking change는 없었다. propTypes 경고가 몇 개 나왔지만 동작에는 문제없었다.

체감 성능

실시간 차트 10개가 동시에 업데이트되는 상황에서 테스트했다.

• React 15: 평균 60ms 프레임 드롭, 스크롤 시 끊김
• React 16: 평균 16ms 유지, 부드러운 스크롤

Chrome DevTools Performance 탭으로 측정한 결과 Fiber의 작업 분할이 실제로 작동하고 있었다. 긴 렌더링이 여러 프레임에 나눠져 실행됐다.

주의사항

아직 베타라 프로덕션 적용은 보류했다. componentWillMount 등 라이프사이클 메서드 deprecation 경고가 있어 향후 마이그레이션 작업이 필요해 보인다.

결론

Fiber는 기대 이상이었다. 정식 출시되면 즉시 적용할 예정이다. 특히 복잡한 UI를 다루는 프로젝트라면 업그레이드 가치가 충분하다.