React
useCallback 과 useMemo 는 메모이제이션 된 값을 반환한다.
차이점은 useCallback 은 함수를 메모이제이션하고 useMemo 는 값을 메모이제이션한다.
React.memo 는 컴포넌트를 메모이제이션해준다.
Memoization
동일한 값을 리턴하는 함수를 반복적으로 호출해야 된다면 맨 처음 값을 계산할때 해당값을
메모리에 저장해서 필요할때마다 또 다시 계산하지않고 메모리에서 꺼내서 재사용 하는 기법
(자주 필요한 값을 맨 처음 계산할때 캐싱을 해둬서 그 값이 필요할때마다 다시 계산하는게 아니고 꺼내서 계산함)
함수형 컴포넌트가 렌더링 되면 component 함수를 호출하고 모든 내부 변수를 초기화한다.
리액트 컴포넌트는 state와 props 변화로 렌더링을 거쳐 value가 초기화가 되기때문에 calculate() 함수가 반복적으로 호출됨, 무의미한 계산을 반복하는 문제점을 UseMemo로 결과값을 재사용을 하여 해결이 가능하다.
useCallback
props로 전달받은 함수를 보존 (deps 하나라도 변하면 그에 맞는 새로운 함수를 리턴)
함수 자체를 가지고 있으며, 함수 재생성 방지라는 차이를 가지고 있다.
useMemo
props로 전달받은 함수를 실행해서, 그 결과값을 보존 (deps가 하나라도 변하면 함수를 다시 실행해서 그 결과값을 보존)
React.memo
단순 UI 컴포넌트의 리렌더링 방지 (props가 들어가는 순간 리렌더링 된다)
React.memo로 전부 커버가 안되는 이유는 props는 함수 또한 객체이기 때문에 부모 컴포넌트가 리렌더링 될때마다 같이 새로운 참조값(주소값)을 가지게 된다. 따라서 React.memo는 새로운 객체(함수)가 props로 들어왔다고 인식해서 리렌더링이 된다.
