React 성능 최적화를 위한 컴포넌트

❗ 컴포넌트 rendering = 컴포넌트 함수를 호출, 실행
❗ 컴포넌트는 자신의 state가 변경되거나 부모에게서 받은 props가 변경될때마다 re-rendering 된다.
👉 이렇듯 많은 re-rendering을 하는 것을 방지하기 위해서 만들어진 것이다.

useEffect

useEffect(()=>{
	// 화면에 첫 rendering 할 때 실행할 코드
  return(
  	// re-rendering이 되기전에 실행할 코드
  )
},[]);

rendering 할때, 하지 않을때 실행된다.

useEffect(()=>{
		실행할 구문;
	},[함수])

화면에 처음 접근했을때, [함수]가 변경될 때만 {실행할 구문}이 실행된다.

useMemo

처음 값을 계산할 때 그 결과값을 메모리에 저장해서 필요할 때만, 계산을 하지않고 메모리에서 꺼내서 재사용 하는 기법
자주 필요한 값을 처음 계산할 때 캐시에 저장을 해둬, 값이 필요할 때마다 캐시를 이용하여 재사용

useMemo(()=>{
	return 값;
},[deps])

여기서 deps는 의존성 배열이다.

const getNumber=(number)=>{
	console.log("🍎숫자가 변동됨");
	return number;
}

const Show=((number,text))=>{
  const showNumber= getNumber(number);
  // 부모에게서 받은 타 props가 변경되어도 작동한다.

  const showNumber= useMemo(()=>getNumber(number), [number]);
  // useMemo를 쓰면, number가 변경될 때에만 작동한다.
  
  return(
  	<div>
      {showNumber}
    </div>
  )
}

useCallback

함수를 메모리에 저장해서 필요할 때만 메모리에서 꺼내서 재사용 하는 기법

useCallback(fun,[deps]);

const getNumber= useCallback(()=>{
    return number
  },[number])
// number가 변경될 때에만 작동한다.