useMemo, useCallback 개념정도와 어디에 쓰이는지 간략하게만 작성하겠습니다.
1. useCallback
결국 memoization !
리액트 공식홈페이지에서는
useCallback will return a memoized version of the callback that only changes if one of the dependencies has changed
라고 설명하고 있습니다.
const memoized = useCallback(()=>{
doingSomething(a,b)
}, [a,b])의존성 배열에 변화가 있다면 callback!
🔴 직접 작성해본 예시입니다.
Wrapper 컴포넌트가 불리고 그 안의 변수들은 초기화를 시작합니다. 그리고 useEffect로 의존성배열에 someFunction을 작성하면
useState의 count를 업데이트 할때마다 다시 리렌더링 되면서
"someFunction이 변경되었습니다." 가 출력됩니다.
결국 state update 후에 다시 렌더링이 진행되고 useEffect의 의존성 배열에 있는 someFunction는 someFunction이라는 변수에 함수라는 객체가 새로운 참조를 다시 바라보면서 갱신 말그대로 계속 갱신되는 것을 알 수 있습니다.
이를 방지하기 위해
const someFunction = useCallback(()=>{
console.log("someFucntion이 변경되었습니다.")
},[])useCallback으로 감싸주게 되면 처음 초기화 당시에 바라보던 참조를 기억합니다. 하지만 dependencies들이 비어있다면 그 초기화 시점의 메모리를 바라보기에 (useEffect console.log은 안찍힙니다. ) 의존성 배열에 state count를 넣어줍니다. 이제 count에 변화가 있다면 callback 함수를 다시 초기화 합니다.
2. useMemo
useMemo는 함수의 연산량이 많을때 이전 결과값을 재사용하는 목적이고, useCallback은 함수가 재생성 되는것을 방지하기 위한 목적이다.
useMemo와 useCallback을 감싼 어떠한 변수를 각각 console을 찍어봐도 memo는 기억했던 값을 가져오는데 callBack은 함수 자체가 찍혔다
아직 명확한 둘의 차이를 이해할 수 없다.
