리액트의 Reconciliation

[woowapark]

• 리액트에서 말하는 Reconciliation이란 무엇일까요?
• Reconciliation은 왜 필요할까요?
• 리액트의 Diffing Algorithm은 어떤 식으로 동작할까요?
• 이런 개념들을 학습한 것은 실제 React 앱을 개발할 때 어떻게 적용해볼 수 있을까요?

[jho2301]

그냥 innerHTML로 때려박아도 화면이 바뀌는데,, 이러면 변화가 필요없는것도 다 바뀌어서 필요한 부분만 변경하도록 하는거라고 생각합니다아

[Puterism]

Virtual DOM과 Real DOM의 차이를 비교하고 실제 렌더할 때 바뀐 부분만 렌더하기 위해서 필요하다고 생각합니다.

[goni-ssi]

리액트가 아니라 웹 브라우저에서 Reconciliation 또는 최적화를 할 수는 없을까요?

[sunhpark42]

diffing Algorithm은 dom element의 유일값(key값과 같이), 해당 요소를 찾아 해당 객체를 비교하는 식으로 작동하지 않을까요?

[0307kwon]

dom을 reflow, repaint하는 작업은 굉장히 부담이 큰 작업이라고 생각합니다.

그런데 우리가 직접 dom을 관리하게 되면 바뀐 부분만 dom을 업데이트 하는 것이 아닌

바뀌지 않은 부분까지 업데이트 할 수도 있습니다.

그래서 리액트가 관리하는 virtual dom과 실제 dom을 비교하여 바뀐 부분만 repaint하는

reconciliation이 필요하다고 생각합니다.

[zigsong]

React element가 렌더링될 때 이전 상태와의 비교를 통해 real DOM을 효과적으로 업데이트하기 위해 reconciliation이 필요합니다
React의 diffing 알고리즘은, 부모가 다르면 부모와 하위 자식 노드들을 모두 교체하고, 그렇지 않다면 바뀐 부분만 교체합니다.

[ddongule]

https://www.huskyhoochu.com/virtual-dom/
요 링크에 설명이 좀 잘 나와있는 것 같아용🧡

[seojihwan]

얇은 동등 비교를 통해 컴포넌트의 상태가 바뀜을 감지하고 해당 컴포넌트를 포함한 자식 컴포넌트들을 다시 렌더링 하는 방식을 사용하는 것인 것 같습니다

[swon3210]

리액트에서 말하는 Reconciliation이란 무엇일까요?

: 특정 가상 돔 엘리먼트 트리를 완전히 재구축 시켜야 할지, 아니면 이전 가상 돔 엘리먼트 트리와 비교해서 바뀐 부분만 변경해야 할지를 결정해주는 것

Reconciliation은 왜 필요할까요?

:

리액트의 Diffing Algorithm은 어떤 식으로 동작할까요?

: 리액트가 가상 돔 트리를 탐색할 때, 타입이나 키 자체가 다른지를 통해 재구축을 수행할지, 일부 변경만 수행할지를 결정하는 식으로 동작합니다.

이런 개념들을 학습한 것은 실제 React 앱을 개발할 때 어떻게 적용해볼 수 있을까요?

: 재구축을 최소화할 때, 혹은 재구축을 일부러 트리거 시키고자 할 때 적용할 수 있을 것이라 생각합니다.