react 스터디에서 리액트를 다루는 기술이라는 책을 선정했고 이 책을 읽고 배운 것을 바탕으로 작성되었다.

📌 useCallback

• useMemo와 비슷하게 주로 렌더링 성능을 최적화해야 할 때 사용한다.
• useCallback 은 특정 함수를 새로 만들지 않고 재사용하고 싶을때 사용한다.
• 첫번째 인자로 생성하고 싶은 함수를 넣고, 두번째 인자로 deps 배열을 넣어준다.
• deps 배열 안에 있는 내용이 바뀌면, 첫번째 인자의 함수를 새로 생성하고, 아니면 이전에 렌더링될 때 생성한 함수를 재사용한다.
• 만약 deps에 빈 배열을 넣게 되면, 컴포넌트가 처음 렌더링될 때 만들었던 함수를 계속 재사용한다.
• 반면, deps 인자에 아무것도 넣지 않는다면 컴포넌트가 매번 렌더링될 때마다 첫번째 인자의 함수를 생성한다.
• 함수 내부에서 상태 값에 의존해야 할 때는 그 값을 반드시 두 번째 인자에 포함해야 한다.

import { useState, useMemo, useCallback } from "react";

const getAverage(numbers){
    console.log("평균값 계산중...");
    if (numbers.length === 0)  return 0;
    const sum = numbers.reduce((value, number) => value + number);
    return sum / numbers.length;
};


const Average = () => {
    const [list, setList] = useState([]);
    const [number, setNumber] = useState("");
    
    const onChange = useCallback((e) => {
        setNumber(e.target.value);
    }, []);
    
    const onInsert = useCallback(() => {
        setList(list.concat(parseInt(number));
        setNumber("");
    }, [list, number]);
    
    const avg = useMemo(() => getAverage(list), [list]);
    
    return (
        <div>
            <input
                type="text"
                name="number"
                value={number}
                onChange={onChange}/>
            <button onClick={onInsert}>등록</button>
            <ul>
                {list.map((value, index) => (<li key={index}>{value}</li>))}
            </ul>
            <div>평균값: {avg}</div>
        </div>
    );

}