[React] useCallback, useMemo, React.memo

useCallback, useMemo, React.memo

useCallBack, useMemo, React.memo 차이점

세 개 다 메모이제이션을 통해 불필요한 렌더링이 발생하지 않게 최적화할 수 있게 만들어주는 훅임
그러면 메모이제이션은 무엇을 뜻할까?

메모이제이션
기존에 수행한 연산의 결과 값을 메모리에 저장해두었다가 동일한 입력이 들어오면 재활용하는 프로그래밍 기법을 의미함
따라서 이 훅들을 적절하게 사용하면 중복된 연산을 피할 수 있기 때문에 성능 최적화에 도움을 줄 수 있지만 너무 많이 사용하면 메모리에 부담을 줌

• useCallback : 함수를 캐싱
• useMemo : 값 자체를 캐싱
• React.memo : 컴포넌트를 캐싱

부모 컴포넌트가 리렌더링될 때 자식컴포넌트는 리렌더링 됨
그런데 만약 자식 컴포넌트에서는 바뀐 것이 없다면 리렌더링이 된다면 낭비일 것임
따라서 react.memo를 사용해 컴포넌트를 메모리에 저장해두고 필요할 때 갖다가 씀
부모의 state 변경으로 인해 props에 변경이 일어나지 않는 한 컴포넌트는 리렌더링이 일어나지 않음(컴포넌트 메모이제이션)

ShouldComponentUpdate

클래스형 컴포넌트에 있던 메소드로 컴포넌트를 리렌더링할지 말지 결정하는 메소드임(boolean)
이게 함수형 컴포넌트로 넘어오면서 useCallback, useMemo, React.memo로 구현할 수 있게 되었음