Hook #2

얕은 비교

자바스크립트의 6가지 타입 중 객체를 제외한 원시 값들은 참조 값이 아닌 값 자체를 새로 할당한다. 따라서 값이 변경되면 서로 다른 값을 가지게 된다.

let value = 1;
let value2 = value;
value2 = 2;
value === value2 // false

반면 참조 타입인 객체는 하나의 값이 변경되면 다란 하나의 값도 동일하게 변경된다. 또한, 참조 타입은 동일 참조 값이 아니라면 즉, 같은 메모리에 할당되지 않았따면 ===에서 false를 반환하다.

let obj = {number: 1};
let obj2 = obj;
obj === obj2; //같은 참조값이므로 true 반환
let arr = ["hello"]
let arr2 = ["hello"]
arr === arr2 // 다른 참조값이므로 false 반환

• React가 리렌더링되는 대표적인 경우

  1. state 변경이 있을 때
  2. 부모 컴포넌트가 렌더링 될 때
  3. 새로운 props이 들어올 때
  4. shouldComponentUpdate에서 true가 반환될 때
  5. forceUpdate가 실행될 때

• 1,2번의 경우 참초 타입들을 실제 내부값까지 비교하지 않고 동일한 메모리 값을 사용하지를 비교하는 지를 통해 새로운 값인 경우 리렌더링을 하게 된다. 객체, 배열, 함수와 같은 객체들은 같은 참조 값이 아니라면 새로운 값으로 판단하게 된다.
  
  

useCallback

• 참초 타입인 함수를 렌더링시 매번 생성하지 않기위해 의존성에 포함된 값이 변경되지 않는다면 이전에 생성한 함수 참조 값을 반화해준다.

const Example = () => {
  const memorizedCallback = useCallback(() => doSomething(a,b), [a,b]);
  return <Lower fns={memorizedCallback} />
}

React.memo

• useCallback 사용하더라도 부모 컴포넌트가 리렌더링된다면 자식의 컴포넌트도 리렌더링 된다. 자식 컴포넌트가 동일한 props로 동일한 결과를 렌더링한다면, Reac.memo를 호출하고 결과를 메모이징함으로써 마지막으로 렌더링된 결과를 재사용할 수 있다.

const memoizedComponent = React.memo((props) => (prev,next) => ...);
// nextProps가 prevProps와 동일한 값을 가지면 true 반환                   

useMemo

• 어떤 함수가 내부적으로 매우 복잡한 연산을 수행하기 때문에 결과값을 반환하는데 오랜 시간이 걸린다면 리렌더링시에 의존성의 값들이 동일한 경우 기존에 메모리의 어딘가에 저장해두었던 결과값을 그대로 사용한다.

const Example({x,y}) => {
  const result = use.Memo(() => compute(x,y), [x,y]);
  return <div>{result}</div>
}