3주차 회고

1. shallowEquals

객체와 배열의 1단계만 비교해서 값이 같은지 판단
-> 중첩구조는 사용 불가능

key 갯수와 key의 값이 같은지 비교한다.

2. deepEquals
   중첩구조까지 재귀함수로 비교한다.

deepEquals는 연산량이 많으므로 비교해서 얻는 최적화 효과 vs 최적화 비용을 고려하여 개발자가 적절히 사용해야 한다.

3. HOC (고차원 컴포넌트 High Order Component)

3-1. memo
memo HOC는 컴포넌트의 props를 얕은 비교하여 불필요한 리렌더링을 방지합니다.

3-2. deepMemo
memo에서 이전ref와 현 ref를 비교할때 deepEquals를 비교하는 차이

4. useRef

useState로 첫 초기화값을 저장한다. useRef는 단순히 { current: 값 } 객체를 반환하지만,

핵심은 React가 리렌더링을 해도 이 값이 초기화되지 않고 유지된다는 것이에요.

setState()처럼 react에게 알리고 바꾸는게 아니라
ref.current = 1; 이렇게 바꾸기 때문에 react가 추적못함.

const mouseXRef = useRef(0);

const handleMouseMove = (e: MouseEvent) => {
  mouseXRef.current = e.clientX;
};
스크롤/마우스 위치는 실시간으로 변하기 때문에 setState하면 리렌더링 폭발😱

useRef를 쓰면 렌더링 없이 값만 잘 쌓아둘 수 있어요.

5. useMemo

(학습단계에서는 useMemo가 어떻게 작동하는지에 대해 학습하기위해 shallowEquals를 사용했지만 실제 react에서는 참조비교만을 실행한ㄷ.)

useMemo(() => {
return calculate();
}, [obj]);
여기서 obj가 매번 새롭게 { a: 1 }처럼 만들어지면
→ obj !== obj 이기 때문에 useMemo는 매번 다시 실행.

useMemo는 그냥 deps의 참조값만 보고 판단. (===)