리액트에서 부모 컴포넌트가 렌더링 될 때 모든 자식 컴포넌트 또한 함께 렌더링 됩니다. 하지만 props가 바뀌지 않으면 해당 자식 컴포넌트는 리렌더링 할 필요가 없습니다. 이런 불필요한 렌더링을 방지하기 위해 사용하는 함수가 바로 React.memo 함수
React.memo(컴포넌트 이름 (props) {});
props가 바뀐 경우에만 컴포넌트 재실행 및 재 평가가 이루어 진다.
함수를 메모이제이션하기 위해서 사용되는 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>
);
값을 메모이제이션 하기 위해서 사용되는 함수
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]); ```
useMemo는 값을 메모이제이션하여
useCallback은 함수를 메모이제이션
useMemo는 의존성 배열에 있는 값의 변경을 감지하여 캐싱된 값을 반환
useCallback은 의존성 배열에 있는 값의 변경을 감지하여 캐싱된 함수 자체를 다시 반환