렌더링 최적화를 위한 Hook

useCallback, useMemo, 그리고 React.memo는 모두 React의 최적화 기법이며, 컴포넌트의 불필요한 렌더링을 줄이는 데 도움을 줍니다.

1. useCallback

인자로 전달받은 콜백함수 자체를 memoization하여 캐싱합니다.

의존성 배열에 넣은 값들이 변화할때만 함수가 재생성합니다.

memoization: 기존에 수행한 연산의 결과값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법을 말합니다. memoization을 절적히 적용하면 중복 연산을 피할 수 있기 때문에 메모리를 조금 더 쓰더라도 애플리케이션의 성능을 최적화할 수 있습니다.

useCallback 구조

const printNumber = useCallback(() => {
	console.log(number)
}. [number])

useCallBack은 두 개의 인자를 받으면, 첫 번째 인자는 콜백함수, 두 번째 함수는 의존성 배열을 받습니다.

첫 번째 인자 콜백함수는 memoization할 함수이며, 두 번째 인자는 배열 안의 값이 업데이트될 때 콜백함수를 다시 재성하여 memoization힙ㄴ;디.

useCallback 사용이유

리액트 컴포넌트에서는 렌더링이 될 때마다 함수형 컴포넌트는 다시 호출됩니다.

자바스크립트에서 함수가 다시 호출되면 함수 내부에 정의된 모든 변수들은 초기화 되어 다시 생성됩니다.

따라서 렌더링이 될 때마다 불필요하게 함수가 재생성되며, 이는 메모리 낭비가 됩니다.

따라서 한 번 만든 함수는 재사용하고, 필요할때만 재생성하여 사용하는것이 바람직합니다.

이것을 위해 useCallback hook를 이용합니다.