[React] 리액트 훅스 - useMemo(), useCallback()

useMemo ?

Memoized value를 리턴하는 훅이다.

파라미터로 Memoized value를 생성하는 create 함수와 의존성 배열을 받는다.

의존성 배열에 들어있는 변수가 변했을 경우에만 새로 create 함수를 호출하여 결괏값을 반환하며,

그렇지 않은 경우에는 기존 함수의 결괏값을 그대로 반환한다.

useMemo() 훅을 사용하면 컴포넌트가 다시 렌더링될 때마다 연산량이 높은 작업을 반복하는 것을 피할 수 있다.

필요할 때만 계산을 하지않고 메모리에서 꺼내서 재사용 하는 기법.

자주 필요한 값을 처음 계산할 때 캐시에 저장을 해두어 값이 필요할 때마다 다시 계산하지 않고 캐시에서 꺼내서 재사용.

useMemo는 의존성이 변경되었을 때만 변경된다.

 

const memoizedValue = useMemo(
	()=>{
    	//연산량이 높은 작업을 수행하여 결과를 반환
        return computeExpensiveValue(의존성 변수1, 의존성 변수2);
        },
        [의존성 변수1, 의존성 변수2]
);

 

useMemo() 훅을 사용할 때 중요한 점은 useMemo()로 전달된 함수는 렌더링이 일어나는 동안 실행된다는 것이다.

 

 

 

 

useCallback ?

 

useMemo()훅과 유사하지만 한가지 차이점은 값이 아닌 함수를 반환한다는 점이다.

useMemo와 마찬가지로 함수와 의존성 배열을 파라미터로 받는다.

 

useCallback(function,deps)
  function : 사용자 정의 함수
  deps : 값이 변경되면 함수를 다시 생성하고 변경되지 않으면 함수를 재사용한다.

 

useCallback 사용처는 아래와 같습니다.

1) 자식 컴포넌트에 props로 함수를 전달할 경우

2) 외부에서 값을 가져오는 api를 호출하는 경우

 

 

https://sorydory.tistory.com/entry/React-%EB%A6%AC%EC%95%A1%ED%8A%B8-%ED%9B%85%EC%8A%A4-useEffect

[React] 리액트 훅스 - useEffect()