📌 useCallback과 useMemo 사용 이유

함수 컴포넌트는 렌더링 될 때 마다 몸체가 다시 실행되므로 컨텍스트를 기억하기 위해 Hook을 사용한다. 그리고 상위 컴포넌트는 기억된 상태 또는 업데이트 함수를 하위 컴포넌트에게 전달한다.

이 때 상위 컴포넌트가 다시 실행되면 이벤트 핸들러 함수들도 새로 그려지므로 동일참조를 벗어난다.

🐸 useCallback

useCallback()은 하위 컴포넌트에 전달되는 함수를 기억해두고 이를 이용하여 컴포넌트 업데이트 시 리렌더링이 발생할 때, 기억된 함수를 사용해 불필요한 리렌더링을 줄여 성능을 높이기 위해 사용한다.

export function Counter({ count: initialCount, step }) {
	const [count, setCount] = useState(initialCount);

	// 1
	const handleIncrement = useCallback(() => {
		setCount((count) => count + step);
		}, [step]);

	// 2
	const handleDecrement = useCallback(() => {
		setCount(count - step);
		}, [count, step]);

	return (
		<div>
			<Counter.Button onClick={handleDecrement}>-</Counter.Button>
			<Counter.Display>{count}</Counter.Display>
			<Counter.Button onClick={handleIncrement}>+</Counter.Button>
        </div>
    )

기억해야할 데이터 타입이 함수인 경우 사용한다.
useEffect()처럼 종속성 배열을 통해 조건에 따라 기억 여부를 재설정할 수 있다.
1번처럼 콜백함수로 전달해주는 경우는 reduce처럼 함수를 기억하고 있는다. 기억되어있는 정보를 가지고 값을 변경하는 것이다.
2번처럼 값을 전달해주면 newState로 받아들여져서 종속성 배열이 바뀌면 렌더링이 발생하게된다. 기억하지 않고 새로운 값을 전달해주고 그 값으로 렌더링해준다.

🐍 useMemo

1	useCallback(fn, deps) === useMemo(() => fn, deps);

useMemo()는 JavaScript 데이터 타입을 기억해야 할 때 사용합니다. 만약 기억해야할 타입이 함수라면 useCallback을 사용한다.

export function Counter({ count: initialCount, step }) {
  const [count, setCount] = useState(initialCount);

  // useMemo(() => fn, deps)
  const handleIncrement = useMemo(
    () => () => setCount((prevCount) => prevCount + step),
    [step]
  );

  // useCallback(fn, deps)
  const handleDecrement = useCallback(() => {
    setCount((prevCount) => prevCount - step);
  }, [step]);

  // memoized Components
  const DecButton = useMemo(
    () => <Counter.Button onClick={handleDecrement}>-</Counter.Button>,
    [handleDecrement]
  );

  const IncButton = useMemo(
    () => <Counter.Button onClick={handleIncrement}>+</Counter.Button>,
    [handleIncrement]
  );

  return (
    <div>
      {DecButton}
      <Counter.Display>{count}</Counter.Display>
      {IncButton}
    </div>
  );
}

useMemo()는 해당 컴포넌트를 기억한다.
종속성 배열 [count, onDecrement, onIncrement, restProps]이 변경되면 useMemo가 반환하는 값을 기억하고 실행한다.
setCount()를 기억하고 있어 동일참조를 하므로 count 값을 기억하고 있다.

🏓 소감

값을 기억하는 목적으로 좋지만… 굳이 이것을 사용하려고 복잡하게 또 많은 시간을 할애할 필요가 있을까 ?

🏰 useCallback과 useMemo

📌 useCallback과 useMemo 사용 이유

🐸 useCallback

🐍 useMemo

🏓 소감

loco9939