최근 자바스크립트 프레임워크들이 당신이 주로 다루는 것이라면, 아마도 최근들어 사람들이 React Fiber 에 대해서 이야기 하는 것을 들어봤을 것 입니다.
React 의 “다음 버전”을 학수 고대하고 그것을 적용하여 당신의 앱들을 모던 앱의 가볍고 빠르게 변화시키고 싶을지도 모릅니다. 또 한편으로 좌절감이 느껴질 정도로 빠른 자바스크립트 프레임워크들의 발생, 진화, 소멸의 속도를 보면, 이 Fiber 도 당신에게 극심한 혼돈을 야기할 수도 있습니다.
자, 심호흡 한 번 하시고 이제 시작하겠습니다. 이 글의 목적은 당신을 조금이라도 안도하게 하고 Fiber 에 관한 잘못된 상식들을 바로 잡고자 함입니다.
Fiber는 무엇인가?
먼저, Fiber 가 아닌 것부터 짚고 넘어가야 합니다. Fiber 는 새로운 프레임워크가 아니고 React 에 망가진 API를 야기하기도 않습니다. 다시 말하지만, Fiber 는 어떠한 API도 망가뜨리지 않습니다.
대신, React Fiber 는 React 의 핵심 알고리즘을 분해해서 새로 쓴 것입니다. 비록 React 의 외부 API가 React 팀으로 하여금 좋은 기능들(render로 부터 배열을 반환할 수 있는 것과 같은)을 추가할 수 있게 해주지만, Fiber 는 React 의 내부적인 작동방식을 바꾼 것이지, React 의 외부 API를 바꾼 것이 아닙니다.
작동원리
React Fiber 는 React 의 조정자를 다시 쓴 것입니다. React 에서, 조정자는 virtual DOM의 차이점 구별과 업데이트를 담당합니다. 이는 페이지에 나타내는 renderer로 virtual DOM을 보내기 전에 그것들을 업데이트합니다. 이 조정자를 renderer로 부터 독립시킴으로써 React 가 다른 플랫폼(예: React Native)을 목표로 하는 renderer들과도 작동할 수 있게 하는 것입니다.
현재 React 버전에서는, 컴포넌트가 업데이트되면, 조정자는 그 컴포넌트의 내부 표현을 업데이트하고 그 업데이트된 내용을, 실제 DOM을 다시 표현하는, renderer에게 보냅니다. 이 과정은 변경 사항이 실행될 때까지 전체 트리를 통해 계속 진행되며, 모든 업데이트과 필요한 모든 렌더링을 한 번씩 수행합니다. 이와 같은 오래 지속되는 자바스크립트 프로세스의 문제점은 브라우저가 다른 것을 못하게 막는다는 것입니다. 만약, 이 프로세스가 매우 오래 걸리면, 프레임은 버려지고, 렌더링은 질도 떨어지고 느려지게 됩니다.
Fiber 라 불리우는 새로운 조정자는 각 엘리먼트의 업데이트를 한 번에 하나씩 처리하고, 다음 엘리먼트로 넘어가기 전에 브라우저가 필요한 모든 작업(사용자 상호작용, 레이아웃, re-render 및 garbage collection)을 수행 할 수도 있도록 해줍니다.
Fiber 조정자는 renderer에게 더이상 각 엘리먼트의 업데이트를 보내지 않습니다. 업데이트들을 work-in-progress 트리라 알려진 또다른 virtual DOM에 저장합니다. 이 work-in-progress 트리는 특정 변화들을 계속 기록 합니다. 전체적인 트리가 준비가 되었을 때만, renderer에게 그 업데이트들을 보냅니다.
Fiber 는 또한 인식된 성능의 중요도에 따라 업데이트의 우선 순위를 결정합니다. 매우 중요한 업데이트는 바로 실행합니다. 다른 업데이트들은 스케쥴을 잡고, 브라우저가 그 일을 수행할 여유가 있을 때 실행합니다.
만약 상위 우선 순위의 업데이트가 우선 순위가 낮은 다른 업데이트들이 끝나기 전에 예약 되면, 이전 업데이트가 어셈블링 중인 work-in-progress 트리가 삭제되고 다시 시작됩니다. 애니메이션과 같은 중요한 업데이트는 인지된 성능에 덜 중요한 업데이트를 기다릴 필요가 없습니다.
Fiber는 내가 가지고 있는 앱을 망가뜨리는가?
간단히 말하면, 아닙니다. React 팀은 이미 현존하는 많은 앱들을 망가뜨릴 수 있는 API 변화를 릴리즈 하지 않기 위해서 매우 조심하고 있다. 보통 그들은 API가 실제로 코드에서 삭제되기 몇 버전 전부터 알림을 추가한다. 심지어 개발자들이 최근 버전으로 바꿀 수 있도록 도와주는 스크립트를 제공합니다.
페이스북은 이미 그들의 3만개 이상의 컴포넌트에서(페이스북은 Fiber 를 사용중이다) 테스트된 Fiber 를 가지고 있다. React v16에서 약간의 deprecation들이 있을 것이지만 Fiber 와는 무관하다. 만약 당신의 앱이 deprecation 알림 없이 v15.5에서 작동한다면, v16을 쓸 준비가 이미 된 것입니다.
Fiber가 나에게 주는 이점은?
일례로, Fiber 는 당신의 앱이 60fps로 부드럽게 작동하게 해 줄 것입니다. Fiber 는 또한 오래 지속되었던 문제들을 정리 해줍니다. 목표 중에 하나가 새로은 기능을 추하고 고유의 renderer를 작성하기 쉽게 하는 것입니다.
언제 릴리즈 되나?
공식적인 Fiber 릴리즈 날짜는 없습니다. React v16 은 “공존 가능 모드(비동기 기능이 비활성화 됨을 의미)”로 Fiber 를 작동시킬 것입니다. 버전 17은 완벽히 Fiber 를 작동시킬 것입니다, 하지만 현재로써는 언제 나올지는 알 수 없습니다.
그래도 굳이 쓰고 싶다!
버전 정보를 명시함으로써 React v16 을 설치 할 수 있습니다.
또는, 정말 원한다면 React 소스를 다운받고 여기에 있는 안내를 따라서 직접 만들어 볼 수 있습니다. Fiber 는 아직 개발중입니다, 그러니 부디 주의를 기울여 주십시오.
원문: http://blog.rangle.io/react-fiber-reconciling-the-rumours-with-the-facts/