React 16 Fiber 출시 후 리팩토링

React 16 beta 찍먹. 커뮤니티에서 말 많던 Fiber가 드디어 기본 렌더러. 기존 코드가 얼마나 그대로 도는지 확인해봄.

결론: 대부분 그대로 동작. 몇 가지만 손보면 됨.

바뀌는 점 (주의할 것):

• render()에서 배열 / 문자열 / 숫자 / null 직접 반환 가능. 예전엔 div로 감싸야 했던거
• 에러 경계 (componentDidCatch) 도입. 트리 내 어디서 throw 나도 fallback UI로 대체 가능
• Fragment — <React.Fragment>...</React.Fragment> 로 무의미 div 제거
• Portal — 특정 DOM 노드 밖으로 렌더 (모달, 툴팁)
• PropTypes, React.createClass 는 별도 패키지로 분리. 안 바꾸면 경고 뜸
• setState에 null 반환하면 업데이트 스킵됨 (noop)

Fiber 자체는 "기존 stack 기반 reconciler를 교체" 한 거라 use-site에선 티 안 남. 내부적으로 렌더를 중단/재개 가능하게 쪼개놓은 구조. time slicing이 가능해지는 기반이지만 16에선 아직 기본 활성은 아님. 그건 앞으로 (async mode) 점진 도입.

리팩토링 체크리스트 (팀에 공유한 거):

1. PropTypes import 경로 확인 — import PropTypes from 'prop-types'; 로 바꿈
2. React.createClass 쓰는 오래된 파일 있나 검색 — ES6 class로 교체
3. render return 에 무의미 wrapper div 있으면 Fragment로
4. 앱 루트에 에러 경계 하나 붙여두기. 컴포넌트 하나 터져서 흰 화면 안 되도록

class ErrorBoundary extends React.Component {
  state = { hasError: false };
  componentDidCatch(error, info) {
    this.setState({ hasError: true });
    logger.error(error, info);
  }
  render() {
    if (this.state.hasError) return <FallbackUI/>;
    return this.props.children;
  }
}

번들 사이즈도 조금 줄음. 체감 rendering 성능은 일반 UI에선 아직 큰 차이 없는데, 대규모 트리 업데이트 상황에서 dropped frames가 줄어든 것이 측정됨. 나중에 async mode 켜지면 이게 더 극적으로 좋아질 것 같다.

16은 마이너 브레이킹만 잘 잡으면 안전하게 올릴 수 있는 버전. 회사 주력 프로덕트는 다음달 적용 예정.