→ 컴포넌트 성능 최적화를 위해 사용되는 대표적인 Hook

useMemo

⭐? Memoization_ 메모이제이션 ?

  → useMemo의 Memo는 Memoization을 뜻함.

  동일한 값을 리턴하는 함수를 반복적으로 호출해야하는 경우
  → 맨 처음값을 메모리에 저장하여 필요할 때마다 꺼내 재사용하는 기법

  자주 사용하는 값 처음 계산할때 캐싱해두어 그 값 필요할 때마다 다시 계산하는 것이 아니라 캐시에서 꺼내서 사용하는 것

함수형 컴포넌트
  호출될 때마다 (=렌더링 될 때마다) 함수 내부의 모든 변수 초기화.

  ∴ 렌더링 되어도 같은 값이 나오는 함수라면 렌더링 될때마다 무의미한 계산을 반복해서 할당하게 되는 것임.

  useMemo를 사용하여 메모이제이션 해주면 이러한 상황을 간편하게 해결 할 수 있다.

컴포넌트가 반복적으로 렌더링되어도 처음 계산된 값만 메모리에서 불러오면 되기때문에 다시 계산하지 않아도 된다

useMemo의 구조

  const value = useMemo(()=>{
      return calculate();
  }, [item]);

• useMemo의 첫번째 인자 : callback 함수

  () => {
      return calculate();
  }

메모이제이션해줄 값을 계산해서 리턴해주는 함수
callback 함수가 리턴하는 값 = useMemo가 리턴하는 값

• useMemo의 두번째 인자 : 배열 (dependence array_의존성 배열)

  [item]

배열안 요소의 값이 업데이트될 때마다 callback함수 다시 호출해서 메모이제이션된 값을 업데이트해서 다시 메모이제이션해줌.
만약 빈 배열 넘겨주면 맨처음에만 계산하고 이후에는 항상 메모이제이션된 값을 꺼내와서 사용.

** [] 안의 조건 만족시켜야만 다시 초기화됨 

⚠️ 주의
   useMemo도 무분별하게 사용하면 성능에 무리가 갈 수 있다
   따로 메모리를 소비해서 값을 저장해놓은 것이기 때문에, 불필요한 값까지 저장해놓으면 오히려 성능악화! 필요할 때만 적절히 사용하기!!

참조 : Youtube - 별코딩