useMemo, useCallback

React.memo

: 의존하는 상태가 없는 변수가 불필요하게 렌더링 되는 것 막음.

const Name = () => <div>홍길동</div>;
export default React.memo(Name);

useMemo

: 함수가 불필요하게 렌더링되는 것 막음.
특정 함수의 결과값을 저장하고, 해당 값이 변경되지 않으면 이전에 계산된 값을 재사용한다. (값을 기억함)
이를 통해 동일한 계산을 반복하지 않고, 렌더링 성능을 최적화할 수 있다.
주로 계산 비용이 높은 함수를 최적화할 때 사용한다.

 const incrementWeight = useCallback(() => {
    setWeight(weight + 1);
    console.log("키 증가버튼 재렌더링");
  }, [weight]);

useCallback

: 함수가 불필요하게 렌더링되는 것 막음.
해당 함수가 변경되지 않으면 이전에 생성된 함수를 재사용한다. (함수를 기억함)
이를 통해 동일한 함수를 반복적으로 생성하지 않고, 렌더링 성능을 최적화할 수 있다.
주로 이벤트 핸들러나 콜백 함수를 최적화할 때 사용한다.(+ 자식 컴포넌트에 함수를 props로 줄 때 사용.)

const expensiveTask = useMemo(() => {
    let i = 0;
    while (i < 999999999) i++;
    return weight > 1000;
  }, [weight]);