부트캠프 67일차 (Virtual DOM, React Hooks)

오늘의 생각

 

React 심화 개념인 가상 돔DOM과 리액트 훅Hook에 대해 학습했다.

 

실습을 많이 하지 못해서 정확히 이해하고 있는지 모르겠지만, 매우 유용한 개념이라고 생각했다. 가상 돔과 리액트 훅 모두 최적화에 도움을 주는 개념이라 실제로 많이 사용되고 있다고 생각했다.

 

헷갈렸던 부분은 Real DOM과 Virtual DOM의 차이에 대해 이해하는 한편, 다른 접근 방식을 시각화하기가 어려워서 코드 구조적으로 차이점을 이해하는데 조금 어려움이 있었다. 

 

비슷한 느낌으로 휴리스틱 알고리즘(Heuristic Algorithm)도 개념은 이해했지만, 기본 조작 알고리즘과 코드적으로 다른 점을 알기 어려웠다.

 

---

오늘의 키워드

가상 돔Virtual DOM, Real DOM, React Diffing Algorithm, 휴리스틱 알고리즘, 클래스형 컴포넌트, 함수형 컴포넌트, 훅, useMemo, 메모이제이션memoization), useCallback, 참조 동등성

 

---

오늘의 학습내용

• Real DOM과 가상 돔Virtual DOM의 차이 및 정의
• React Diffing Algorithm의 휴리스틱 알고리즘을 통한 시간 복잡도 해결 방법 및 구동 원리
• 클래스형 컴포넌트와 함수형 컴포넌트의 차이점 및 정의
• 리액트 훅의 역할 및 사용 규칙
• useMemo와 useCallback 훅의 차이점 및 사용법

 

---

어려웠던 keyword / 활용한 질문

 

Q. DOM의 조작 속도가 느려지는 이유와 어떻게 가상 DOM이 더 빠른 지에 대해 설명해주실 수 있나요?

 

A. 기존 돔은 자바스크립트를 통해 접근하고 탐색하기 때문에 반복적으로 리플로우가 발생합니다. 따라서 비효율적인 업데이트로 프레임 드랍과 같은 성능성 저하 문제가 발생할 수 있습니다. 가상 DOM을 사용하면 가상의 UI 메모리 유지를 통해 생성된 DOM을 업데이트 전과 후로 나누어 비교한 뒤 실제 DOM에 수행할 수 있는 최상의 방법을 계산할 수 있어 효율성을 높일 수 있습니다.

 

Q. 자바스크립트 함수 동등성이란 무엇인가요?

 

A. 자바스크립트에서 함수를 객체로 취급하기 때문에 동일한 함수를 사용해도 메모리 주소값 차이로 다른 함수를 사용하고 있다고 인식하는 특성을 말합니다. 이러한 자바스크립트 특성은 React 컴포넌트 함수 내에서 자식 컴포넌트의 prop으로 함수를 전달할 때 예기치 못한 성능 문제로 이어질 수 있기 때문에 주의해야 합니다.