React.memo , useMemo , useCallback 으로 최적화 시키기

출처:https://ssangq.netlify.app/posts/react-memo-useMemo-useCallback
를 보고 정리 해 봄!

Memoization

: 이전 값을 메모리에 저장해 동일한 계산의 반복을 제거해 빠른 처리를 가능하게 하는 기술

useMemo, useCallback, React.memo 는 Memoization을 기반으로 작동한다.

React.memo : component의 결과값을 memoized함.

일반적으로 함수를 직접 감싸서 사용하기도 한다.

const Welcome = ({name}) => {

	return <h1> Hello {name} </h1>;

};

export default React.memo(Welcome);

Welcome의 결과를 Memoization해서 이후 props가 변경될때까지 현재 memoized된
내용을 그대로 사용해 리렌더링을 막는다.

React.memo가 props를 비교할때 얕은 비교를 진행한다.
얕은 비교 : 원시값일때 -> 같은값을 갖는지 확인/ 객체,배열 일때 -> 같은 참조값,같은주소값을 갖는지 확인.

React.memo메서드는
React.memo(component,compFunc)이 기본형태이다.
compFunc는 수동으로 비교방식을 수정할 수 있다.

React.memo는 언제 사용할까?

무조건적인 사용은 지양한다.
최적화를 위한 연산이 불필요한 경우에는 비용만 발생시킨다.

React.memo는 아래의 상황에서 사용을 권장한다.

1. Pure Functional Component에서
2. Rendering이 자주 일어날 경우
3. re-rendering이 되는 동안 계속 같은 props값이 전달 될 경우
4. UI element의 양이 많은 컴포넌트의 경우

일반적으로 불필요한 Render가 많이 발생하는 곳에서 사용해라

React.memo를 사용하지 말아야할 경우

class기반의 컴포넌트를 래핑하는것은 적절하지 않다.
이 경우 memoizatioin을 해야한다면
PureComponent를 확장해 사용하거나
shouldComponentUpdate()를 사용하길 권장.

useMemo : 함수의 결과값을 memoized함.

: 메모리제이션된 값을 반환한다

useMemo는 함수 호출 이후의 return값이 memoized된다.
두번째 파라미터인 배열의 요소가 변경될때 마다 첫번째 파라미터의 callback함수를 다시 생성하는 방식이다.

useCallback : 함수를 memoized함.

:메모리제이션된 함수를 반환한다

const handleChange = useCallback(
	(e) => {setNum(e.target.value)
   }, [] 
) ;

useCallback을 통해 memoized된 함수는 eventhandler로 사용되며
두번째 인자인 [] <- 배열인 요소가 변경될때마다 새로운 함수가 생성된다.