🎈React.memo

리액트에서 부모 컴포넌트가 렌더링 된다면, 그 밑에 속하는 모든 자식 컴포넌트도 렌더링이 되게 된다. 그러나 부모 컴포넌트에서 내려주는 props값의 변경이 없다면 굳이 자식 컴포넌트까지 렌더링을 할 필요가 없게 된다.

const myComponent = React.memo(function myComponent ({props})=>{})

UseMemo와의 차이점?

• UseMemo는 hook, 오직 함수형 컴포넌트에서만 사용가능
• React.memo는 HOC(Higher Order Component), 클래스형, 함수형 컴포넌트 모두 사용가능

🎈useCallback

useCallback은 함수를 memoization하기 위해 사용되는 함수다.

const callback = useCallback(함수, 배열);

첫 번째 인자로는 함수를, 두번째 인자로 넘어온 배열(의존성 배열) 내의 값이 변경될 때까지 저장하다가, 배열 내의 값이 변경되면 재사용할 수 있게 해준다.

컴포넌트 안의 함수는 렌더링이 될 때마다 새로운 함수가 생성되는데, useCallback()을 사용하면 그 함수가 의존하는 값들이 변화하지 않는한 기존 함수를 반환한다.

const add = useCallback(() = > x+y, [x,y]);

여기서 x, y 값이 바뀔 때만 새로운 함수가 생성되고, 그렇지 않다면 리렌더링 되더라도 기존 함수를 사용한다.