useCallback

의미

💡 함수의 재사용을 위해 사용하는 Hook
💡 useCallback은 함수를 호출을 하지 않는 Hook이 아니라, 그저 메모리 어딘가에 함수를 꺼내서 호출하는 Hook
-함수를 반복해서 생성하지 않기 위해서 사용하는 것이 아님

참조동등성

💡 useCallback은 참조 동등성에 의존

참조동등성
React는 리렌더링 시 함수를 새로 만들어서 호출
기존의 함수와 같지 않음(같은 주소를 공유하지 않음)

✅ React 컴포넌트 함수 내에서 다른 함수의 인자로 넘기거나 자식 컴포넌트의 prop으로 넘길 때 사용

적용

//App.js
import { useState, useCallback } from "react";
import List from "./List";

export default function App() {
	const [input, setInput] = useState(1);
  	
    const handleChange = (event) => {
      if (Number(event.target.value)) {
        setInput(Number(event.target.value));
      }
    };
  
    const getItems = useCallback(() => {
    	return [input + 10, input + 100];
  	}, [input]);
  
  	return (
    <>
      <div className="wall-paper">
        <input
          type="number"
          value={input}
          onChange={handleChange}
        />
        <List getItems={getItems} />
      </div>
    </>
  );
}

//List.js
import { useState, useEffect } from "react";

function List({ getItems }) {
  const [items, setItems] = useState([]);

  useEffect(() => {
    setItems(getItems());
  }, [getItems]);

  return (
    <div>
      {items.map((item) => (
        <div key={item}>{item}</div>
      ))}
    </div>
  );
}

export default List;

참고

useCallback 사용 가이드