[TECH-QA] 리액트의 useCallback와 useMemo

const memoizedCallback = useCallback(() => {
  // 함수 로직
}, [의존성1, 의존성2]);

import React, { useState, useCallback } from 'react';

function Child({ onClick }) {
  console.log('Child rendered');
  return <button onClick={onClick}>Click me</button>;
}

function Parent() {
  const [count, setCount] = useState(0);

  // useCallback 없이 함수를 정의하면 매 렌더링마다 새 함수가 생성됨
  const handleClick = useCallback(() => {
    setCount((prev) => prev + 1);
  }, []); // 의존성 배열이 빈 경우, 함수는 처음 생성된 후 재사용됨

  return (
    <div>
      <p>Count: {count}</p>
      <Child onClick={handleClick} />
    </div>
  );
}

const memoizedValue = useMemo(() => {
  // 계산 로직
  return 결과값;
}, [의존성1, 의존성2]);

import React, { useState, useMemo } from 'react';

function ExpensiveComponent() {
  const [number, setNumber] = useState(1);

  // 비용이 큰 계산을 시뮬레이션
  const computeExpensiveValue = (num) => {
    console.log('Computing...');
    return num * 1000; // 간단한 예시로 곱셈 사용
  };

  // useMemo로 계산 결과를 메모이제이션
  const expensiveResult = useMemo(() => computeExpensiveValue(number), [number]);

  return (
    <div>
      <p>Result: {expensiveResult}</p>
      <button onClick={() => setNumber(number + 1)}>Increment</button>
    </div>
  );
}