최적화

최적화와 메모이제이션

연산 최적화는 대부분 '메모이제이션(Memoization)' 기법을 이용하며, 특정 입력에 대한 결과를 계산해 메모리 어딘가에 저장했다가, 동일한 요청이 들어오면 저장한 결괏값을 제공해 빠르게 응답하는 기술을 뜻함

함수의 불필요한 재호출 방지하기

useMemo는 메모이제이션 기법을 이용해 연산의 결괏값을 기억했다가 필요할 때 사용함으로써 불필요한 함수 호출을 막아주는 리액트 훅

const value = useMemo(callback, deps);

- deps : 의존성 배열
- callback : 의존성 배열에 담긴 값이 바뀌면 다시 실행하게 되는 콜백 함수

불필요한 컴포넌트 리렌더 방지하기

React.memo를 이용하면 메모이제이션 기법으로 컴포넌트가 불필요하게 리렌더되는 상황을 방지할 수 있음

const memoizedComp = React.memo(Comp);

- momoizedComp : Props를 기준으로 메모이제이션 됨
- Comp : 메모이제이션하려는 컴포넌트

React.memo는 Props의 변경 여부를 기준으로 컴포넌트의 리렌더 여부를 결정하며, 만약 Props로 전달되는 값이 많을 때는 판별 함수를 인수로 전달해 Props의 특정 값만으로 리렌더 여부를 판단할 수 있음

const Comp = ({a, b, c}) => {
	return <div>Comp</div>;
};

// 단, 이런 개별 참조 방식은 유지보수 측면에서 너무 좋지 않기 때문에, useCallback 함수를 이용하여 수정되어져야 함

function areEqual(prevProps, nextProps) {
	if (prevProps.a === nextProps.a) {
    	return true;
    } else {
    	return false;
    }
}

const MemoizedComp = React.memo(Comp, areEqual);

불필요한 함수 재생성 방지하기

useCallback은 컴포넌트가 리렌더될 때 내부에서 작성된 함수를 다시 생성하지 않도록 메모이제이션하는 리액트 훅임

[ 기본 사용법 ]

const memoizedFunc = useCallback(func, deps);

- deps : 의존성 배열로서, 빈 배열로 전달하면 콜백 함수를 어떤 경우에도 최초 생성 이후에는 다시 생성되지 않도록 함
- 의존성 배열에 담긴 값이 바뀌면 다시 실행하게 되는 콜백 함수

useCallback을 사용하면서 setState로 최신 State 값을 추적하려면 함수형 업데이트 기능을 사용해야 함

const onCreate = useCallback() => {
	setState((state) => [newItem, ...state]);
}, []);