TIL 최적화(useCallback, useMemo)

이정민·2022년 12월 13일
0
post-thumbnail

useMemo

리액트에서 부모 컴포넌트가 렌더링 될 때 모든 자식 컴포넌트 또한 함께 렌더링 됩니다. 하지만 props가 바뀌지 않으면 해당 자식 컴포넌트는 리렌더링 할 필요가 없습니다. 이런 불필요한 렌더링을 방지하기 위해 사용하는 함수가 바로 React.memo 함수

 React.memo(컴포넌트 이름 (props) {});

props가 바뀐 경우에만 컴포넌트 재실행 및 재 평가가 이루어 진다.

useCallback

함수를 메모이제이션하기 위해서 사용되는 hook 함수

const  = useCallback(함수, 배열);
const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b], // useEffect때처럼 이 값이 바뀔 때 마다 
);
  const onClickButton = useCallback(() => {
    setHidden(true);
  }, []);
  //onClickButton이란 함수를 저장
  return (
    <div>
      <button onClick={onClickButton}>숨기기</button>
      // 이때 함수가 새로 생성되지 않기 위해서 위에서 useCallback처리를 
    </div>
  );

useMemo

값을 메모이제이션 하기 위해서 사용되는 함수

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

useMemo는 값을 메모이제이션하여
useCallback은 함수를 메모이제이션
useMemo는 의존성 배열에 있는 값의 변경을 감지하여 캐싱된 값을 반환
useCallback은 의존성 배열에 있는 값의 변경을 감지하여 캐싱된 함수 자체를 다시 반환

0개의 댓글