[React] Hooks - useCallback + useMemo

useCallback

• 특정 콜백함수가 의존성 배열에 명시된 값들이 변경되지 않는 한 동일한 함수 인스턴스를 유지하도록 해주는 훅
• 주로 자식 컴포넌트에 함수를 전달할 때 사용

//# 자식 컴포넌트
const Button = React.memo(({handleClick} : {handleClick: () => void}) => {
  console.log(`버튼이 렌더링 되었습니다.`);
  return <button onClick={handleClick}>클릭</button>
});

//# 부모 컴포넌트
export default function UseCallback() {
  const [count, setCount] = useState<number>(0);
  const [text, setText] = useState<string>("");

  // 부모 컴포넌트에서 정의한 이벤트 핸들러
  // : useCallback을 사용하여 함수의 동일한 인스턴스를 유지

  // >> 2개의 인수 전달
  // 첫 번째 인수: 콜백 함수
  // 두 번째 인수: 새로운 함수를 등록하기 위한 의존성 배열
  const handleCountClick = useCallback(() => {
    setCount(prevCount => prevCount + 1);
  }, [count]);

  return (
    <div>
      <h3>useCallback</h3>
      <p>Count: {count}</p>
      <Button handleClick={handleCountClick} />
      <p>
        <input type="text" value={text} onChange={(e) => setText(e.target.value)} />
      </p>
    </div>
  )
}

 

useMemo

• use + Memoization(메모리화)
• 성능 최적화를 위한 Hook
• 컴포넌트가 렌더링될 때 특정 연산의 결과를 메모리에 저장하여 동인한 값에 대해서는 해당 연산을 다시 수행하지 않도록 하는 훅

export default function UseMemo01() {
  const [count, setCount] = useState<number>(0);
  const [inputValue, setInputValue] = useState<string>("");

  // 복잡한 계산 함수 (시간이 오래 걸리는 작업)

  const expensiveCalc = (num: number) => {
    for (let i = 0; i < 999999999; i++){}
    return num + 100;
  }

  // const result = expensiveCalc(count)

  //! useMomo()훅의 경우 메모리에 저장된 값을 반환
  // >> 내부의 구조는 useEffect와 동일 (콜백함수, 의존성배열)
  const memoizedResult = useMemo(() => {
    const result = expensiveCalc(count);
    return result
    // 배열 안의(의존성 배열, deps)의 값이 변경될 때만 재계산
  }, [count]);

  return (
    <div>
      <h3>useMemo</h3>
      <p>Count: {count}</p>
      <p>Result(Count + 100): {memoizedResult}</p>
      <button
        onClick={() => {
          setCount((prevCount) => prevCount + 1);
        }}
      >
        증가
      </button>
      <p>
        <input
          type="text"
          value={inputValue}
          placeholder="입력해주세요"
          onChange={(e) => setInputValue(e.target.value)}
        />
      </p>
    </div>
  );
}

 

컴포넌트 자체를 메모화 하는 경우

• React.memo()
• 함수형 컴포넌트에서 props의 값이 동일한 경우
• 이전의 렌더링 결과를 재사용하여 불필요한 리렌더링을 방지

//# 자식 컴포넌트
const ChildComponent = React.memo(({ count }: { count: number }) => {
  console.log("자식 컴포넌트 렌더링");
  return <div>Count: {count}</div>;
});

//# 부모 컴포넌트
function UseMemo02() {
  const [count, setCount] = useState<number>(0);
  const [text, setText] = useState<string>("");

  return (
    <div>
      <h3>React.memo 예시</h3>
      <ChildComponent count={count} />
      <button onClick={() => setCount(count + 1)}>증가</button>

      <input
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
    </div>
  );
}

// 컴포넌트를 메모이제이션하고 export default로 내보내기
export default React.memo(UseMemo02);