useMemo

Optimization 최적화

useMemo와 useCallback이 있다.

Memo -> Memoization 뜻함

동일한 값을 리턴하는 함수를 반복적으로 호출해야 한다면 맨 처음 값을 계산할때 메모리에 저장해서 필요할때 마다 또 다시 계산하지 않고 메모리에서 꺼내서 재사용 하는 기법이다. 자주 필요한 값은 맨처음 값을 캐시에서 꺼내서 사용한다.

먼저 시작하기 전 한가지 기억해야 할 점은
함수형 컴포넌트는

함수는 호출될 때마다 함수 내부의 정의되어 있는 모든 변수들이 초기화 된다.

useMemo 구조
2개의 인자를 받는다. 첫번쨰 인자는 콜백함수
두번째 인자는 배열을 받는다. 첫번째 인자 콜백함수는 우리가 메모이제이션 해줄 값을 계산해서 리턴해주는 함수이다. 콜백함수가 리턴하는 값이 바로 유즈메모가 리턴하는 값이다. 두번쨰 인자인 배열은 의존성 배열이라고 불린다. useMemo는 배열 안에 요소의 값이 업데이트 될 떄만 콜백함수를 다시 호출해서 메모이제이션된 값을 업데이트해서 다시 메모이제이션을 해준다. 만약 빈 배열을 넘겨주면 맨처음 컴포넌트가 마운트 될 때만 값을 계산해주고 이후에는 항상 메모이제이션 된 값을 꺼내와서 사용한다.

이렇게 좋은 useMemo는 무분별하게 남용하면 성능에 무리가 될 수도 있다.