TIL28-04 React Hooks - 최적화(React.memo, useCallback, useMemo)

React.memo

• memo란? : 처음 렌더링 된 상태를 기억한다.
• 부모 컴포넌트가 리 렌더링 된 경우 자식 컴포넌트 모두 리 렌더링, 자식 컴포넌트까지 리렌더링 될 필요가 없다.
• 밑의 코드처럼 export 부분을 React.memo로 감싸준다.

export default React.memo(Box1);
export default React.memo(Box2);
export default React.memo(Box3);

useCallback

• 인자로 들어오는 함수 자체를 기억한다.
• 자바스크립트에서는 함수도 객체의 한 종류다. 따라서 모양은 같더라도 다시 만들어지면 그 주솟값이 달라지고 이에 따라 하위 컴포넌트가 변경됐다고 인식한다.
• 밑의 코드는 useCallback 의 예시 코드이다.

// 변경 전
const initCount = () => {
  setCount(0);
};

// 변경 후
const initCount = useCallback(() => {
  setCount(0);
}, []); //의존성 배열을 집어 넣어 초기상태를 저장한다.

useMemo

• 동일한 값을 반환하는 함수를 계속 호출해야 하면 필요없는 렌더링을 한다고 볼 수 있다. 맨 처음 해당 값을 반환할 때 그 값을 특별한 곳(메모리)에 저장한다. 이렇게 하면 필요할 때 마다 다시 함수를 호출해서 계산하는게 아니라 이미 저장한 값을 단순히 꺼내와서 쓸 수 있다. 보통 이러한 기법을 캐싱을 한다. 라고 표현하기도 한다.
• 밑의 코드는 useMemo의 예시코드이다. dependency Array의 값이 변경 될 때만 반환할_함수()가 호출된다.

// as-is
const value = 반환할_함수();

// to-be
const value = useMemo(()=> {
	return 반환할_함수()
}, [dependencyArray]);

• useMemo를 남발하게 되면 별도의 메모리 확보를 너무나 많이 하게 되기 때문에 오히려 성능이 악화될 수 있다.