변경사항과 DOM조작의 최적화 방법
- 데이터 변화에 따른 렌더링을 하게 된다면, 병목현상이 생겼다. 그래서 실제 DOM조작을 최소화 하는것이 중요했다.
- 변경사항이 발생하면 메모리상에 dom과 유사한 가상 dom을 만들어서 실제 dom과 비교해서 리렌더링을 해준다.
순서
- 변경사항이 감지
- 변경한 내용을 바탕으로 가상 dom 1을 생성
- 실제 dom에 반영
- 변경사항이 감지
- 가상 dom 2를 생성
- 가상 dom1과 2를 비교해서 바뀐 부분만 반영
어떻게 달라진 부분만 찾았을까?
트리구조로 되어있는 dom이기 때문에 쉽게 찾을 수 있었따.
- 두개의 트리를 단순 비교하면 O(N^3)의 복잡도가 발생하고 매우 비효율 적이다.
- 실제로 컴포넌트가 변화하는 이유는 1.데이터의 변화, 2.조건부 렌더링 또는 리스트 렌더링 등에 대한 요인에서만 변경된다.
- 그렇다면 트리구조가 뒤집혀지는 경우가 없다고 가정하여 순차적으로 비교한다.
level by level
- jsx가 정해져 있기 때문에 트리구조가 뒤집힐리 없으니, 계층별로 비교해도 문제없다. O(n)이면 충분하다.
- 다만 같은 계층이라도 순서 변경을 고려하면 복잡해 지기 때문에 key를 사용해서 감지를 가능케 해준다.
- 태그가 다르면 세부 항복을 비교하지않고 바로 다시 그려준다.
- 이러한 규칙을 세워서 리렌더링 해주게 된다.
- 리렌더링 해줄때 하위트리 까지 다 재 렌더링 해준다.
이런 개념은 사실 개발할때는 필요없지만 최적화를 하게 되었을때 반드시 필요한 개념이다.
- 위에서 얘기 했듯이 리렌더링 시, 하위트리까지 다 재 렌더링 대상이 되는데 아무리 봐도 비효율 적이다.
- 이때 하위 노드는 변경 안해도 된다고 명시해주면서 개발하는 방식이 바로 리렌더링 최적화이다.
- 방법은 : React.memo 컴포넌트 메모이제이션, useMemo,자식 컴포넌트의 props로 객체를 넘겨줄 경우 변형하지말고 넘겨주기 등이 있다.
단점
- 메모리 오버헤드
- 수동 최적화
