[React] Hook - useMemo와 useCallback

Frontend/React

Kei Song 2022. 2. 9. 19:46

안녕하세요

오늘은 React Hook 기능 중 'useMemo'과 'useCallback' 에 대해 알아보도록 하겠습니다.

useMemo는 값을 재사용하고 싶을 때 사용하고, useCallback은 함수를 재사용하고 싶을 때 사용합니다.

useMemo는 어떻게 함수를 재사용할 수 있게 해주는걸까요?

메모리에 값를 저장하는 방법(Memoization, 메모이제이션)을 사용하여 재사용할 수 있도록 도와줍니다.

아래의 코드를 봅시다.

const memoizedValue = useMemo(()=> computeExpensiveValue(a,b), [a,b]);

두 번째 매개 변수인 배열의 a,b 중 하나의 값에 변화가 있으면, useMemo는 다시 value를 계산합니다. 두 번째 매개 변수에 아무것도 전달하지 않으면 렌더링 시에 매번 새로운 값을 반환하게 됩니다.

useCallback도 useMemo와 같이 Memoization (메모이제이션)을 사용합니다.

useCallback은 함수를 저장합니다

아래의 코드를 봅시다.

const memoizedCallback = useCallback(() =>{
	doSomething(a,b);
}, [a,b]);

두 번째 매개 변수인 배열의 a, b 중 하나의 값에 변화가 있으면, useCallback은 메모이제이션된 함수를 리턴하게 됩니다. useCallback은 함수를 자식 component에 전달할 때나 불필요한 렌더링을 줄일 때 유용하게 사용할 수 있습니다.

*React.memo 란?

컴포넌트의 props가 바뀌지 않으면 리렌더링을 방지하여 컴포넌트의 리렌더링 성능 최적화를 해줄 수 있는 함수