useCallback

useCallback은 컴포넌트를 최적화 시켜주는 도구이다.

 

useMemo와의 차이점

• useMemo: 인자로 콜 백함수를 넣어주면 return 값을 memoization 한다.
• useCallback: 인자로 전달한 콜백함수 그 자체를 memoization 한다.

const calculate = useCallback((num) => {
	return num + 1;
}, [item])

useCallback으로 함수를 감싸주어 함수가 필요할 때마다 메모리에서 가져와 재사용한다.

 

function Component() {
	const calculate = useCallback((num) => {
    	return num + 1
    }, [item]);
	return <div>{value}</div>
}

컴포넌트 객체가 처음 렌더링 될 때만 함수 객체를 만들어서 변수를 초기화 해 주고 이후에 렌더링 될 때는 이전에 할당받은 Memoize된 함수 객체를 재사용 한다.

 

useCallback(() => {
	return value;
}, [item])

첫번째 인자로는 memoization해 줄 callback 함수, 두번째 인자로는 의존성 배열을 받는다.

 

 

useEffect를 사용해도 되지 않을까?

const [number, setNumber] = useState(0);

const someFunction = () => {
	console.log(`${number}`);
    return;
}

useEffect(() => {
	console.log('someFunction 변경확인하기')
}, [someFunction])

이렇게 하면 렌더링 될 때마다 useEffect가 실행된다. 왜 useEffect는 사용이 안될까?

 

someFunction은 객체이기 때문에 변수가 아닌 메모리 공간에 저장이 되고 변수에는 메모리 주소가 저장이 된다. 컴포넌트가 새로 렌더링되고 함수도 다시 렌더링 될 때  메모리 주소값이 달라 다른 객체로 인식한다.

 

const [number, setNumber] = useState(0);

const someFunction = useCallback(() => {
	console.log(`${number}`);
    return;
}, [number])

useCallback을 사용하면 아무리 렌더링 되어도 number가 바뀌지 않으면 함수를 다시 가져오지 않고 메모리에 저장된 함수를 가져온다.