useMemo를 사용하여 연산한 값 재사용하기

🔖 useMemo를 사용하여 연산한 값 재사용하기

📌 배운 내용 및 기억하고 싶은 내용

• 관련되어 있지 않은 다른 상태를 관리하는 함수가 실행됬을때, 다른 함수가 작동하여 불필요하게 리렌더링 되므로 자원이 낭비되고 문제가 생김.

• 성능 최적화를 하기 위해 사용

• useMemo에서 Memo 는 “memoized” 를 의미

  • 이전에 계산 한 값을 재사용한다는 의미

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

    첫번째 파라미터에 어떻게 연산할지 정의하는 함수(생성 함수)를 넣고, 의존배열을 넣는다.

    useMemo는 의존성이 변경되었을 때에만 메모이제이션된 값만 다시 계산 한다.

    즉, 배열 안에 넣은 내용이 바뀌면 우리가 등록한 함수를 호출해서 값을 연산해주고, 만약에 내용이 바뀌지 않았다면 이전에 연산한 값을 재사용하게 된다.

    useMemo는 최적화는 모든 렌더링 시의 고비용 계산을 방지하게 해준다.