React.memo/useMemo, useCallback

memorization에 대해서 알아보자

• memo
• useMemo
• useCallback

memo

React.memo는 higher-order components(HOC)

컴포넌트를 인자로 받아 새로운 컴포넌트를 return 해주는 함수 

 

useMemo

1. 함수형 컴포넌트는 jsx를 반환하는 함수 
2. 함수가 실행될 때마다 내부에 선언된 표현식(변수, 또다른 함수)을 매번 다시 선언
3. 자신의 state가 변경, 부모에게 받는 props가 변경되었을 때마다 리렌더링 

const [state, setState] = useState(initialState);


const [state, setState] = useState(() => {
  const initialState = someExpensiveComputation(props);
  return initialState;
});

메모리제이션된 값을 반환함 

단 

1. 하위 컴포넌트가 React.memo()같은 것으로 최적화 되어있고 

2. 하위 컴포넌트에게 callback함수를 props로 넘길 때

상위 컴포넌트에서 useCallback으로 함수를 선언하는 것이 유용

함수가 매번 재 선언되면 하위 컴포넌트는 넘겨받은 함수가 달라졌다고 인식하기 때문 

 

useCallback

사용하는 이유: 특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용