useMemo 와 useCallback

useMemo는 hooks사용 시 사용한다.

 

hooks는 기본적으로 렌더링 될 때마다 전체가 전부 실행되는데

만약 state의 기본값으로 함수가 들어가 있다면 함수가 렌더링 될 때마다 실행된다.

그렇기 때문에 기억하는 공간이 필요한데 그때 사용하는 것이 useMemo이다.

import React, {useState, useRef, useEffect, useMemo} from 'react';

function getNumbers(){

	console.log('hi');
}

const Number = () => {

	const { num , setNum} = useState(getNumbers());
}//이경우 함수의 반복적실행 고치기위해선
const newNumbers = useMemo( () => getNumbers(), [])
const { num , setNum} = useSate(newNumbers);

두 번째 인자인 [] 배열에 따라서 재호출 된다 

useMemo는 복잡한 함수의 리턴 값을 기억할 때 사용되며

useRef는 일반적인 값을 기억한다.

그 이유는 useMemo를 사용하지 않은 경우 시간이 오래 걸리는 함수라면 렌더링 자체에 지연이 될 수 있다. 따라서 그 값을 기억해 사용하도록 하는 것이 바람직하다

 

 

 

 

 

useCallback은 함수 자체를 기억합니다.

함수 생성 자체가 오래 걸리거나 비용이 크다면 함수 자체를 기억해서 사용하는 것이 바람직합니다.

 

useCallback ( () => {



}, []) 

여기서 주의할 점은 useCallback은 기억을 너무 잘해서 첫 번째 state값만을 기억합니다. 따라서 두 번째 인자에 state값을 넣어주어서 변경시마다 업데이트가 필요합니다.

 

자식에게 함수를 넘겨줄 때에도 마찬가지입니다. 매번 새로운 함수가 생성되는데 자식에게 매번 새로운 props가 전달되기 때문에 자식이 매번 렌더링을 하게 됩니다. 따라서 useCallback을 이용해서 전달해주어야 합니다.

 

훅스는 함수형 컴포넌트이기때문에 절차가 중요합니다. 조건 문안에  함수나 반복 문안에 절차가 있다면 에러가 발생할 수 있습니다.

 

tip 만약 useEffect에서 componentDidUpdate에서만 실행하고 싶다면?

const mounted = useRef(false);;

useEffect( () => {
	if(!mounted.current){
    	mounted.current = true;
    }else{
    	//ajax
    }

}, [바뀌는값])