useMemo, useCallback

useMemo

불필요한 랜더링을 줄이려면 어떻게 해야할까. 불필요한 랜더링이 되면 효율은 떨어지게 될 것이다.

자식이 받는 프롭스가 변경될 때만 랜더링하게 하려면 React.meno를 사용합니다.
이는 고차 컴포넌트 인데, 좀 더 최적화된 컴포넌트를 받을 수 있습니다.

const Student = ({ name, age, address}) +> {
	return (
  	<div>
     <h1>{name}</h1>
  	 <span>{age}</span>
	 <span>{address}</span>
     </div>
  )

}

Prop Check를 하고 랜더링 변화를 확인한다.
변화가 없다면 재사용한다.

React.memo 필요할때

-컴포넌트가 같은 Prop로 자주 렌더링 될때
-컴포넌트가 렌더링이 될때마다 복잡한 로직을 처리해야 한다면

<간단한 사용법>

import React, {memo} from 'react'; //확장자를 추가해주고
\
\
const child = ({name}) =>{
\

export default memo(Child); // memo로 감싸준다.

memo동작 원리

react memo는 고차함수로 랜더링 값을 받을 때마다 Props cheack를 하고 변경시에만 적용해주는 것 입니다.

useMemo

//ex)

const age = useMemo(() => {
  return plusAge(currentAge)
}, [currentAge]) //currentAge값이 변경될 때만 랜더링된다.

간단용어

ㅡMemoization : 미리 계산해둔 값을 저장해서 사용.

useCallback 동작원리

callBack 함수는 return하는 값 자체를 Memoization을 해주는 것이다.
이는 다시 계산할 필요 없이 계산된 값을 사용하는 것.

일반적인 함수(컴포넌트)는 렌더링-> 함수 호출 -> 모든 내부 변수 초기화를 한다.

<형태>

useCallback(() => { //1. Memoization 해줄 콜백함수
  return value;
}, [item]) //2. 의존성 배열

const calculate = useCallback((num) => {
  return num + 1;
}, [item])

의존성 배열이 바뀌지 않는다면 useCallback값 유지