useCallback
메모이제이션된 함수를 반환하는 함수
컴포넌트가 리렌더링 될때마다 컴포넌트 내부에 있는 함수가 리렌더링 되는데, 이를 막아주기 위해 useCallback을 사용해 주면 유용하다. 즉, 불필요한 리렌더링을 막아주는 셈이다.
useCallback이 하는 일
- 함수를 메모라이징 해준다.
- Dependency값이 추가될 때, 함수가 리렌더링되게 해준다.
언제쓸까?
- 자식 컴포넌트에 함수를 props로 넘겨주는데 해당 자식 컴포넌트에 넘겨주는 함수 때문에 불필요한 리렌더링이 일어난다고 판단될 경우
function App() {
const [name, setName] = useState('');
const onSave = useCallback(() => {
console.log(name);
}, [name]);
return (
<div className="App">
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
/>
<Profile onSave={onSave} />
</div>
);- 함수 자체가 매우 복잡하거나, 비용이 많이 드는 경우
useCallback 절대 쓰지말것!
setState나 dispatch를 단순 호출할 경우. 불필요한 연산을 더하는 셈이므로 절대 쓰지말자!
useMemo
메모이제이션된 값을 반환하는 함수
cf .메모이제이션 - 컴퓨터 프로그램이 동일한 계산을 반복해야할때, 이전에 계산한 값을 메모리에 저장해 놓음으로써 동일하나 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술
ㅎ.ㅎ