Virtual DOM

• React에서는 실제 DOM을 조작하는것이 아닌 가상의 DOM을 구성해서 기존 DOM과 비교 후 달라진 부분을 리렌더링 하는 방식으로 작동

Virtual DOM을 사용하는 이유

• JavaScript를 사용하여 DOM을 조작하는 방식은 브라우저가 화면을 그리는데 필요한 모든 정보가 들어있기 때문에 무겁다
• 이로인해 변경사항만 빠르게 파악하고 리렌더링 하기 위한 가상의 DOM을 만들어 비교하는 방식을 이용
• React에서는 실제 렌더링된 UI를 내부적으로 JavaScript 객체로 따로 관리

Virture DOM 업데이트 과정

• UI의 변경이 감지되면 해당 UI를 비교를 위한 가상의 DOM으로 렌더링한다
• 현재 Virtual DOM과 이전 Virtual DOM을 비교 후 차이가 있는 부분을 실제 DOM에 반영

불변성

• React에서 배열이나 객체의 값을 변경할 때는 불변성을 지켜주어야 한다
• 배열 혹은 객체의 원본을 수정하지 않고 깊은 복사를 이용해 상태를 변경

React.memo

• 컴포넌트를 memoization하는 React.memo의 경우 props, props의 객체를 비교할 때 얕은비교를 실행하는것이 기본 동작 방식
• props의 객체를 비교할때에도 얕은 비교를 하기 때문에 같은 값을 주더라도 다른 주소로 인식하여 불필요한 리렌더링이 발생될 수 있다

React.memo + 깊은 비교

• 두번째 인자로 비교 방식을 깊은 비교를 이용함으로써 객체의 경우에도 불필요한 리렌더링이 발생되는걸 방지할 수 있다

fast-deep-equal

https://www.npmjs.com/package/fast-deep-equal

• 작성자가 깊은비교를 위해 사용하는 패키지
• creat-react-app을 통한 프로젝트 생성시 추가적인 설치 없이 사용 가능

 	import isEqual from 'fast-deep-equal'
	import React from 'react'

	interface ComponentProps {
		...    
    }

	const Component:React.FC<ComponentProps> = (props) => {
      ...
    }
      
     export default React.memo(Component, isEqual)

참고

https://babycoder05.tistory.com/entry/React-Virtual-DOM-%EA%B3%BC-%EB%B9%84%EA%B5%90-%EC%9B%90%EB%A6%AC%EC%99%80-%EC%96%95%EC%9D%80-%EB%B9%84%EA%B5%90?category=1023016

https://velog.io/@fltxld3/React-React.memo%EB%A1%9C-Rendering-%EC%B5%9C%EC%A0%81%ED%99%942-feat.%EC%9D%BC%EA%B8%B0%EC%9E%A5