[React] useMemo / useCallback

✅ useMemo

• 함수 컴포넌트 내부에서 발생하는 연산을 최적화

🔸 사용예시

• input으로 state에 정수값을 담아 submit 버튼 누르면 값을 등록하고 평균을 계산해 화면에 렌더링하는 함수가 있다면
• input만 바뀌더라도 state가 변경되어 컴포넌트가 재렌더링되며 화면에 보여지는 결과값 계산을 계속해서 실행하게됨

...
<div>Average : {getAverage(list)}</div>
...

• 이때, 해당 값을 useMemo로 별도의 함수로 정의하여 화면에 렌더링 한다면, 의존성 배열을 받아 해당 값이 변경될 때만 재 실행

const avg = useMemo(() => getAverage(list), [list])
...
<div>Average : {avg}</div>

✅ useCallback

• useMemo와 상당히 유사
• 주로 렌더링 성능 최적화에 사용
• 만들어둔 함수 재사용 가능
  
  
• 컴포넌트 내에 함수를 정의해두면, 컴포넌트가 리렌더링 될 때마다 새로 만들어진 함수를 사용하게 됨
• 일반적으로 크게 문제가 되지는 않지만, 리렌더링이 잦다면 성능 저하가 발생
• 의존성 배열로 재정의 조건을 설정할 수 있음

const onChange = useCallback((e) => {
	setNumber(e.target.value);
},[]) // 🔹 컴포넌트 처음 렌더링 될 때만 함수 생성, 계속 재사용

const onInsert = useCallback((e) => {
	const nextList = list.concat(parseInt(number));
    setList(nextList);
    setNumber('');
}, [numebr, list]) // 🔹 number, list가 바뀌었을 때만 함수 생성