리액트 파이버

리액트 파이버

리액트에서 관리하는 평범한 자바스크립트 객체, 파이버는 파이버 재조정자가 관리. 즉 리액트에서 어떤부분을 새롭게 랜더링 하는지 가상 dom과 실재 dom을 비교하는 알고리즘, 리엑트 파이버의 모든 작업은 비동기로 일어난다. 왜냐하면 싱글스레드로 운영되는 js의 단점을 완화하기 위함.

1. 렌더링 단계에서 사용자에게 노출되지 않는 모든 비동기 작업 수행하고 우선순위지정, 작업 폐기 등을 실행
2. DOM에 실제 변경사항을 반영하기 위한 작업 진행

• 파이버는 컴포넌트가 최초로 마운트 되는 시점에 생성돼 가급적 재사용된다.
• new FilberNode() 로 구현체 생성가능

리액트 파이버 트리

리액트 파이버 트리는 리액트내부에 두개가 존재한다. 하나는 현재 모습을 담은 파이버 트리, 또 하나는 작업 중인 상태를 나타내는 workInProgress트리, 리액트 파이버의 작업이 끝나면 리액트는 단순히 포인터만 변경해서 workInProgress트리를 현재 트리로 바꿔버린다. 이런한 기술을 더블 버블링이라고한다. 더블버블링은 컴퓨터 그래픽분야에 많이 사용되는 용어다. 컴퓨터가 그래픽을 그릴때 그리는 속도보다 보여주는 속도가 빨라버리면 미완성된 그림이 사용자에게 노출되는데 이를 방지하기위해 보이지않는곳에 미리 그려놓고 보여줘야할때 완성된 그림을 보여주는 기술이다. 브라우저와 인터렉션이 일어날때 불완전한 트리를 보여주지 않기 위해 사용하는 기법인것이다.

작업순서

1. 리엑트는 bginwork()함수를 통해 파이버 작업을 실행하는데 더이상 자식이 없는 파이버를 만날때까지 트리형식으로 시작된다.
2. 1번작업이 끝나면 complework()함수를 실행해서 파이버 작업을 마무리한다.
3. 형제가 있다면 형제로 넘어간다.
4. 완료된 내용을 상위트리에 전파한다.

위 프로세스에서 bginwork()로 파이버를 만들때 자식이 자식이 없다면 더 깊은 트리가 있어도 파이버를 생산하지않는다.또한 동일한 트리를 만들때 또한 파이버를 만들지않는다 매번 비슷한 작업을 할때 새로 파이버를 만드는것이아니라 기존 파이브에 props를 받아서 처리를 하여 더 속도적으로나 자원적으로나 이득을 보도록 설계돼 있다.

가상 DOM과 리액트의 핵심은 브라우저의 DOM을 더욱 빠르게 그리고 반영하는 것이 아니라 바로 값으로 UI를 표현하는데에 있다. 화면에 표시되는 UI를 문자열 배열 등과 마찬가지로 값으로 관리하고 이러한 흐름을 효율적으로 관리하기 위한 메커니즘이 바로 리액트의 핵심이다.