[Krafton Jungle] WIL: Week4 React diff, vdom

날이 좀 풀렸다.

 

생강나무에서 노란 꽃이 피기 시작했다.

 

꿀벌들도 나와서 꿀을 빤다.

 

날도 풀렸겠다 밖에 좀 나가고 싶다..

 

---

 

 

Virtual DOM and Diff

웹 어플리케이션이 복잡해짐에 따라 DOM을 직접 조작하는 방식을 관리하기 위해 기술적 발전이 필요했다.

 

React는 현재 상태의 UI가 어떻게 생겨야 하는지를 선언적으로 표현하는 데 있다. 그래서 실제 DOM 조작은 React가 처리한다.

 

이 과정에서 등장한 개념이 Virtual DOM이다. Virtual DOM은 실제 DOM의 경량 버전 같은 가상화 트리이다. 리액트는 이전 Virtual DOM과 다음 Virtual DOM을 비교해서 차이점을 실제 DOM에 반영한다.

 

이 과정이 Diff라고 하며, React에선 Reconciliation이라고 부른다. 변경이 필요한 부분만 최소한으로 업데이하는 방식으로 효율적인 업데이트를 얻을 수 있다.

 

이후 React는 더 복잡한 화면 갱신을 효율적으로 처리하기 위해 Fiber 구조를 도입했다. Fiber는 리액트의 렌더링 작업을 더 잘게 나누고, 우선순위를 조정할 수 있게 해 주는 내부 구조다. 렌더링 작업을 더 유연하고 정교하게 스케줄링하기 위한 구조라고 이해할 수 있다.

 

알고리즘을 단순히 문제풀이용으로만 생각하고있었다. 프로그램에서 사용되는 자료구조와 알고리즘은 깊게 생각해본 적이 없다. 당연히 HTML이니까 트리 구조일 것이고, 그걸 순회하는 것은 DFS혹은 BFS를 사용할것이고, 이 때 자식 노드를 ref하니 그걸 따라갈 것이고. 이정도로만 생각했는데, 코치님은 이 노드들을 matrix 형태로 담고 GPU로 병렬 연산을 하면 더 빠르지 않겠냐는 아이디어를 던져줬다. 문제를 해결하는 과정에서 형태를 바꾸고 더 빠른 연산 방법을 떠올리는 것이 엔지니어링적인 능력이 아닌가 싶다.

         

다음 부턴 WIL에 쓸 것이 생각나면 바로바로 적어놓아야겠다. 회고 하려니 잘 나지 않는다.