[React] Reconciliation(재조정), Virtual DOM(가상돔), Diffing Algorithm(비교 알고리즘) 알아보기

Reconciliation(재조정)

정리하자면 "React는 컴포넌트에 변화가 생길 때마다 모든 컴포넌트 요소를 재렌더링 하는 게 아니라 실제 돔(Real DOM)과 가상돔(Virtual DOM)을 비교하여 변경된 요소나 속성만 변경해주는 비교 알고리즘(Diffing Algorithm)을 사용한다."는 뜻이다.

 

 

→ 가상의 표현(Virtual DOM)을 메모리에 저장하고 실제 DOM과 동기화하는 과정 === 재조정(Reconciliation)

---

Virtual DOM(가상돔)

Real DOM을 직접 변경하게 되면 모든 컴포넌트가 재렌더링 되어야 하기 때문에 렌더링 횟수가 많아지고, 그에 따른 비용이 늘어나게 됩니다. 이를 방지하기 위해 React의 Virtual DOM은 최소한의 DOM만을 조작하여 실제 DOM의 렌더링 횟수를 줄임으로써 성능을 최적화 할 수 있습니다.

---

Diffing Algorithm(비교 알고리즘)

 

- 동작 원리

1) 루트(root) 엘리먼트의 타입이 다른 경우 (부모가 다른 경우)

즉, 부모가 달라지면 그에 따른 자식들도 다르듯 DOM도 마찬가지로 두 루트 엘리먼트의 타입이 달라지면 새로운 트리를 구축하고 이전에 있던 모든 컴포넌트가 언마운트 되고, state도 사라진다.

 

2) DOM 엘리먼트의 타입이 같은 경우 (속성만 다른 경우)

추가로 같은 타입의 컴포넌트 엘리먼트 간의 렌더링에서 기존 state는 동일하게 유지되고, 새로운 엘리먼트의 내용을 갱신하기 위해서 props는 갱신됩니다.

 

3) 자식 요소가 바뀌는 경우

위 설명을 정리해보자면

DOM은 동시에 두 리스트를 순서대로(위 → 아래) 순회하면서 변경된 부분만 재귀적*으로 처리한다.

(* 재귀적 : 어떤 사건이 자신을 포함하고 다시 자기 자신을 사용하여 정의될 때)

 

기본적으로 첫번째 자식부터 비교하며 변경하기 때문에 첫 자식 요소에 새로운 요소를 삽입하는 경우 처음부터 비교를 해야 하기 때문에 성능에 좋지 않다. 이 문제는 key를 사용하면 해결 할 수 있기 때문에 그 부분은 아래에서 설명하도록 하겠다.

 

key를 사용하면 두 리스트를 비교할 때 첫번째 자식부터 순서대로 비교하는 것이 아니라 key 값의 유무를 판단하여 변경이 일어나기 때문에 훨씬 효율적이라고 할 수 있다.

 

이때 key 값에는 유일한 값을 사용해야 하기 때문에 보통 id를 사용한다.

(불가피하게 유일값이 존재하지 않는 경우 최선책으로 index 값을 사용하지만 이는 권장하지 않는다.)

---

마무리

개발 공부는 해도해도 끝이 없는 것 같다. 그래도 내가 하는 일이 재미있고 더 재미있게 일하기 위해서 오늘도 강의 듣고, 정리한다.

---

출처

React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리

React, diffing 알고리즘