https://ssminji.github.io/2020/02/05/the-cake-thief/

https://ko.reactjs.org/docs/hooks-reference.html#usecallback

https://ko.reactjs.org/docs/hooks-reference.html#usememo

https://ko.reactjs.org/docs/react-api.html#reactmemo

메모이제이션

컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행속도를 빠르게 하는 기술

동적 계획법의 핵심이 되는 기술!

메모이제이션은 글자 그대로 해석하면 ‘메모리에 넣기’라는 의미이며 ‘기억되어야 할 것’이라는 뜻

메모이제이션을 하는 두가지 이유

• 비싼 연산을 반복하는 것을 피하여 성능을 향상시킨다
• 안정된 값 제공

useCallback

const memoizedCallback = useCallback(() => {
  doSomething(a, b)
}, [a, b])

useCallback은 메모이제이션 된 콜백을 반환함
컴포넌트 내부에 있는 위치해 있는 컴포넌트가 렌더링 될 때마다 다시 함수를 생성!
하지만 useCallback으로 감싸주게 되면 첫 렌더할 때만 생성하고 그 이후에는 함수를 기억하고 있어 재생성 X

useMemo

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

useMemo는 메모이제이션 된 값을 반환한다!
렌더링하는 과정에서 특정 값이 바뀌었을 때만 계산을 실행하고, 원하는 값이 바뀌지 않았다면 이전에 계산한 그 값을 그대로 사용.
useCallback 과 마찬가지로 dependency 배열에 값을넘긴다.

React.memo

// 방법 1
const Result = React.memo(() => {
  return ()
})

// 방법 2
export default React.memo(Result)

React.memo는 컴포넌트를 감싸서 사용하며, 들어온 props 의 값이 바뀌었다면 해당 컴포넌트의 렌더를 발생시킴
props만 받는 자식컴포넌트에서 사용하는 것을 권장!

Class 컴포넌트에는 PureComponent 가 존재, React.memo 와는 달리 props와 state 의 얕은 비교하는
shouldComponentUpdate와 비슷 purecomponent는 하위 컴포넌트에 대한 props를 갱신하지 않기 떄문에, 반드시 자식 컴포넌트들이 순수한지 확인해야함.