리액트 Fiber는 기존의 Virtual Dom에서 사용되던 Reconciliation 알고리즘의 비 효율성을 개선한 작업으로 예전에 쓰던 재조정(stack reconciler)에서 fiber reconciler로 변경되었다.
이 Fiber의 배경이 되는 동시성, 평행성 개념을 먼저 알아보자
동시성과 평행성
동시성이란 2개 이상의 태스크를 동시에 지원함을 의미하고, 평행성은 2개 이상의 태스크를 동시에 실행할 수 있음을 의미한다.
평행성의 경우 2개 이상의 태스크를 동시에 실행하려면 여러개의 스레드가 필요한 것이 정석이지만 JS(node 환경)은 보통 싱글 스레드 환경에서 동작하기 때문에 지원이 불가능하지만 다른 방식을 이용해 동시성을 지원하게 된다.
동시성 실행 방식
동시성은 꼭 평행성처럼 동시에 작업이 실행될 필요 없이, 동시에 지원만 하면 된다는 것이다.
예를 들어 A, B, C, D라는 여러개의 동작이 있을 때 두개의 동시성을 위해서 이런 플로우로 동작시킬 수 있다.
- A라는 작업을 시작한다.
- A 작업이 50% 진행될 때 B라는 급한 작업이 들어온다.
- B를 100% 완료하고 다시 A로 들어간다.
- A가 80% 완료될 쯤 비교적 간단한 C라는 작업을 수행한다.
- C를 완벽하게 수행하고 다시 A라는 작업으로 돌아간다.
- A가 90% 완료될 쯤, 중요한 작업인 D를 수행한다.
- D를 완벽하게 수행하고 A의 작업을 마저 한다.
- A도 100% 완료하고 다른 작업이 있는지 살펴본다.
싱글 스레드는 한번에 하나의 일만 처리가 가능하다. 위의 예시를 보면 플로우에서는 여러 작업을 완료했지만 그렇다고 하나가 다 완료되어야만 나머지 하나를 진행하는 방식은 아니고, 큰 작업의 경우 대기시키고 급하거나 간단한 작업을 쳐내는 방식으로 문제를 해결하게 된다. 즉 작업을 일시정지하고 급한 작업을 쳐내는 방식을 활용해 동시성을 지원하게 하는 방법을 사용한 것이다.
평행성 실행 방식
평행성은 동시에 작업이 실행되어야 한다. 동시에 지원이 아닌 동시에 실행하는 것이 핵심이다.
사람을 예시로 들어보자면, 사람은 물론 한번에 두가지 일을 할 수 있을지도 모른다. 글을 쓰면서 휘파람 부는 일은 가능하니까... 하지만 컴퓨터적인 사고를 위해 예시를 들어보면 노래를 부르면서 밥은 먹는 행위를 하는 것은 불가능하다. 노래를 부르려면 입을 써야하지만 밥을 먹기 위해서도 입을 써야하고 사람의 입은 하나기에 한번에 이 2가지 행위는 불가능하다.
그러면 노래를 부르면서 밥은 먹는 행위를 동시에 하기 위해서는 2명 이상의 사람이 필요하다.
- A라는 사람은 노래를 부른다.
- B라는 사람은 밥을 먹는다.
이 2가지 행위를 동시에 실행함으로써 해당 행위를 만족할 수 있다. 하지만 컴퓨터적인 사고로 다시 돌아와 생각해보면 두개의 작업을 동시에 진행하게 된다면 반드시 겹치는 데이터를 다루는 경우가 있을 것이고 동시에 다른 행위를 하다보면 그 정보들의 처리가 곤란해지게 된다.
A라는 사람이 7,000원을 가지고 있고 B에게 5,000원을 송금하고, C라는 사람에게 3,000원을 입금 받는다고 가정해보자 (물론 이거는 동시에 진행되면 안되긴 하지만 예시라고 가정하자)
- A가 B에게 5,000원을 송금한다. (잔액 2,000원)
- A가 C에게 3,000원을 받는다. (잔액 10,000원)
동시에 두가지 업무를 수행하게 되면 발생하는 문제이다. 물론 다시 한번 강조하지만 이 예제는 말이 안되는 예제이지만 그냥 받아들여야 한다.
컴퓨터는 동시에 여러 작업을 수행하려면 보통 여러 스레드(멀티 스레딩)를 이용해서 처리하게 된다. 동시에 처리하게 되면 같은 데이터를 기반으로 동시에 2 작업이 수행되면 스레드 별로 결과값이 다르고 가지고 있는 메모리의 값도 달라지게 된다는 것이다. 위와 같은 현상이면 최악의 경우는 다음과 같아진다.
- 실제로 위 예제를 상식선으로만 생각하면 7,000 - 5,000 + 3,000 = 5,000원이 A의 잔액이다.
- 1번의 스레드에서 3,000원을 송금하려할 때 잔액 부족이 나온다.
- 2번의 스레드에서 7,000원을 송금할 때 송금이 된다.
평행성의 경우 이런 문제를 해결하기 위해 context-switching을 사용해 해결한다.
