매일 면접 연습하기
가상 DOM의 동작 원리를 설명하고, 실제 DOM과의 차이점을 설명해 주세요. 또한, Virtual DOM을 사용하는 React의 렌더링 성능 최적화 방식에 대해 설명하고, shouldComponentUpdate 또는 React.memo와 같은 기법이 어떤 역할을 하는지 설명하세요.
→ 가상 DOM은 실제 DOM과 같은 구조를 가지고 있는 자바스크립트 객체입니다. 실제 DOM은 DOM 요소가 수정될 때마다 변경된 부분을 브라우저에 적용하기 때문에 성능상 부담이 큽니다. 하지만 Virtual DOM의 경우 여러 변경사항을 모아서 변경 사항을 모아 한 번에 처리함으로써 DOM 조작의 빈도를 줄여 성능을 향상 시킨다.
브라우저 동작 순서는 다음과 같습니다.
- UI 변경이 발생하면 새로운 Virtual DOM이 생성된다.
- React는 새로운 가상 DOM과 이전의 DOM을 비교(Diffing)하여 업데이트할 부분을 찾아낸다.
- 차이점만 DOM에 실제 반영한다. 이를 재조정(Reconciliation)이라고 한다.
shouldComponentUpdate와 React.memo 모두 랜더링 최적화에 활용되는 함수입니다.
shouldComponentUpdate는 클래스 컴포넌트에 사용되는 메서드로 컴포넌트의 렌더링 여부를 결정합니다.React.memo는 함수형 컴포넌트에서 사용하는 최적화 기법으로 props가 변경되지 않았을 때 이전의 랜더링 결과를 재사용하여 불필요한 랜더링을 방지합니다.
나도 잘하고 싶다..!