렌더링 최적화를 위한 useMemo & useCallback

렌더링 최적화를 위한 useMemo, useCallback, useMemo

메모이제이션된 함수의 값을 반환하느냐, 메모이제이션된 함수를 반환하느냐, 메모이제이션된 컴포넌트를 반환하느냐

• useMemo

  메모이제이션된 함수의 값을 반환

  의존성을 두고 의존하고 있는 값이 바뀔때만 연산을 실행

• useCallback

  메모이제이션된 함수를 반환

  의존성을 두고 컴포넌트가 리렌더링될 때 의존하고 있는 값이 바뀔경우만 함수를 새로 생성

• React.memo

  메모이제이션된 컴포넌트를 반환

  props 가 변경될 때 까지 컴포넌트 리렌더링을 막음

  • 사용될 때

    Pure Functional Component 는 전제 조건

    1. 렌더링이 자주 일어날 경우

    2. 리렌더링이 되는 동안에도 계속 같은 props 값이 전달될 경우

    3. UI element 의 양이 많은 컴포넌트의 경우

  • 사용되지 말아야 할 때

    1. 위의 경우가 아닐 경우

    2. class 기반의 컴포넌트를 래핑하는 경우