Real DOM (DOM)
DOM은 Document Object Model의 약자로, 뜻을 그대로 풀자면 문서 객체 모델을 의미
DOM은 브라우저가 트리 구조로 만든 객체 모델
DOM의 조작 속도가 느려지는 이유
- 트리는 “데이터 저장"의 의미보다는 “저장된 데이터를 더 효과적으로 탐색”하기 위해 사용되므로, 빠른 자료 탐색 성능이 장점인 자료구조라고 볼 수 있습니다
- DOM의 변경 및 업데이트는 브라우저 또한 화면을 리플로우(Reflow)한다는 것을 의미합니다.
- 브라우저의 리플로우와 리페인트 과정은 다시금 레이아웃 및 페인트에 해당하는 재연산을 해야 하기 때문에 속도가 그만큼 느려지게 됩니다.
Virtual DOM
자바 스크립트는 한 부분이 바뀌면 모든 부분을 리렌더링 한다. 바뀐 부분만 비교해서 그 부분만 렌더링을 할 수는 없을까?“ 라는 아이디어를 기반으로 React는 Virtual DOM이 탄생하였다.
React Diffing Algorithm
React는 기존의 가상 DOM 트리와 새롭게 변경된 가상 DOM 트리를 비교할 때, 트리의 레벨 순서대로 순회하는 방식으로 탐색합니다. 즉 같은 레벨(위치)끼리 비교한다는 뜻입니다. 이는 너비 우선 탐색(BFS)의 일종이라고 볼 수 있습니다.
React는 위에서 아래로 순차적으로 비교 -> 이러면 위에서 부터 바뀌면 안좋아진다 그렇기 때문에 key가 생겨났다.
만약 자식 노드들이 이 key를 갖고 있다면, React는 그 key를 이용해 기존 트리의 자식과 새로운 트리의 자식이 일치하는지 아닌지 확인할 수 있습니다.
Hook
리액트의 컴포넌트
리액트는 복잡한 클래스 컴포넌트가 아닌 단순한 함수형 컴포넌트 이다.
카운트를 하는 클래스 컴포넌트
카운트를 하는 함수형 컴포넌트
Hook이란 class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해준다. 즉 함수형 컴포넌트에서 상태 값 및 다른 여러 기능을 사용하기 편리하게 해주는 메소드를 의미한다.
Hook 사용 규칙
- 리액트 함수의 최상위에서만 호출해야 합니다.
- 오직 리액트 함수 내에서만 사용되어야 합니다.
useMemo
useMemo - 특정 값(value)를 재사용하고자 할 때 사용하는 Hook입니다
useCallback
useMemo와 마찬가지로 메모이제이션 기법을 이용한 Hook입니다. useMemo는 값의 재사용을 위해 사용하는 Hook이라면, useCallback은 함수의 재사용을 위해 사용하는 Hook이다
