UseMemo & useCallback

useMemo

​ useMemo는 컴포넌트의 성능을 최적할 시킬 수 있는 react hooks 중 하나 입니다.

여기서 Memo는 memoization를 뜻한다고 합니다 즉 기존의 연산값을 어딘가에 저장하고 같은 입력이

들어오면 재활용 하게 됩니다 . 이러한 작업은 랜더링 하는 과정에서 특정 값이 바뀌었을 때만 연산을 실행하고 원하는 값이 바뀌지 않았다면, 이전에 연산했던 결과를 다시 사용하는 방식이니 쓸데 없는 계산을 줄이게 되는거구요.

아래의 간단한 예제를 통해 사용법을 알아 보겠습니다.

코드를 입력하세요import {useState, useMemo} from 'react';

const getAveragte = (numbers) = >{
	console.log('평균값 구하는 중 ');
	if(numbers == 0) return 0;
	const sum = numbers.reduce((a,b)=> a + b);
	return sum / numbers.length;
};

const Average = () => {
	const [list, setList] = useState([]);
	const [number, setNumber] = useState('');
	const onChange = (event) =>{
		setNumber(e.target.value);
	}
	const onInsert = ()=>{
		const nextList = list.concat(parseInt(number));
		setList(nextList);
		setNumber('');
	}
}
const avg = useMemo(()=>{getAveragte(list),[list]});

return(
	<div>
		<input value={number} onChange={onChange}/>
		<button onClick={onInsert}>등록하기</button>
		<ul>
			{list.map((value,index)=>(
				<li key={index}>{value}</li>
			))}
		/ul>
		<div><p>평균값: {avg}</p></div>
	</div>
)
export default Average;

위의 코드와 같이 useMemo를 사용하게 되면 랜더링 될 때마다 실행 되는 것이 아닌 list값이 바뀔 때마다 함수가 호출 됩니다.

** 예전에 영화 api로 데이터를 불러와서 포스터를 클릭하면 해당 영화의 정보나 트레일러등 을 보여주는 홈페이지를 제작한 경험이 있습니다. 그런데 처음에는 문제없이 작동이 되었는데 어쩌다 한 번씩

영화의 정보가 오브젝트에 담겨 있었는데 불러올 수 가 없는 오류가 발생하여 진땀 뺀 경험이 있었습니다.

당시의 저는 useEffect hook를 사용하여 변화가 생기면 새로운 데이터를 불러오는 형식이었는데

useMemo를 공부하면서 알게 된 점은

object !== object 

오브젝트의 값이 똑같아도 가지고 있는 주소값이 다르기 때문에 계속 하여 무한 랜더링이 되었던 경험이 있습니다. 제가 만약 useMemo를 알고 있는 상태였다면 그 때 그렇게 고생할 필요가 없었을 겁니다...

이를 계기로 다시 한번 해당 코드를 리팩토링 하고 다시 게제해볼 예정입니다.

useCallback

useCallback

​ useCallback 은 useMemo와 비슷한 hook 입니다. useMemo가 특정값을 재사용 한다면

useCallback은 특정 함수를 새로 만들지 않고 재사용 합니다.

const myCallbackFunc = useCallback(함수,배열);

예를 들어 React 컴포넌트 안에 add라는 함수가 선언 되어 있다면 이 함수는 해당 컴포넌트가 랜더링 될 때마다 새로운 함수가 생성되니 비효율적일 겁니다.

const add  = ()=> a + b;

여기서 useCallback hook를 사용하면 해당 컴포넌트가 재랜더링 되어도 의존하는 값이 바뀌지 않는 이상 기존함수를 반환합니다. (a 나 b가 바뀌면 새로운 함수 호출 )

const add = useCallback(()=> a + b , [a,b]);