[React] React Hooks - useCallback, useMemo, memo, useId

React Hooks - useCallback

• useCallback이란
  • 특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용 (함수 cache)
  • 메모화된 함수는 자식 컴포넌트에서 re-render시 재호출 방지
  • 한 번만 생성되어야 하는 함수를 전달할 때 사용
• 사용
  • 기본 형태

 

React Hooks - useMemo

• useMemo란
  • 여기서 Memo는 memoization을 뜻하고 이전에 계산한 값을 메모리에 저장하여 동일한 계산의 반복 수행을 제거하여 실행 속도를 올리는 기술이다.
  • 변수를 React Static 영역에 cache
  • 메모화된 변수는 이제 주소가 변하지 않는다.
• 사용
  • import
    • import { useMemo } from ‘react’;
  • 기본 형태

  const 메모화된_변수 = useMemo(() => { 
     비용이_드는_코드;       
     return 메모화할_값;                
   }, [의존관계변수들]);      
  

 

React Hooks - memo

• memo란
  • component memoization
  • 컴포넌트가 props로 동일한 결과를 랜더링하면 memo를 호출하고 결과를 memoizaing하여 성능 향상 (마지막으로 랜더링된 결과를 재사용)
  • props 변화에만 영향을 주고 state, context가 변하면 재랜더링
• 기본 형태
  • memo(Component, (pre, curr) ⇒ !!cache);
    • 두번째 함수가 true를 반환하면 cache
• 예시
  • memo(Component, () ⇒ true)
    • 영원히 cache
  • memo(Component, ({prop: a}, {prop: b}) ⇒ a === b);
    • 이전 상태값과 현재 전달된 값이 같으면

 

React Hooks - useId

• useId
  • 고유한 ID를 생성해주는 hook
  • 변경될 수 있는 곳(key, selector 등)에서는 사용하지 말 것
  • LabelInput 컴포넌트를 여러 개 사용시 DOM의 id 중복 문제 해결