React, useMemo, useCallback

useMemo

const avg = useMemo(() => getAverage(list), [list]);

 

useCallback

const 함수명 = useCallback(() => {
내용
}, [number]); // number 값이 바뀔 때만 함수 생성

 

Average.jsx

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

const getAverage = (numbers) => { // 평균값 계산 함수
    console.log('계산중...');
    if (numbers.length === 0) return 0; // 배열이 비어 있으면 0 반환
    return numbers.reduce((a, b) => a + b) / numbers.length; // 숫자들의 합을 구하고 평균을 계산
};

const Average = () => {

    const [list, setList] = useState([]);
    const [number, setNumber] = useState("");

    const inputEl = useRef(null); // ref 참조

    // 입력 값이 변경될 때마다 호출되는 함수
    const onChange = useCallback((e) => setNumber(e.target.value), []); // number 값을 상태에 저장

    // 숫자를 리스트에 추가하는 함수
    const onInsert = useCallback(() => {
        if (number === "") return; // 입력값이 빈 문자열인 경우 아무 동작도 하지 않음
        setList((prevList) => [...prevList, parseInt(number)]); // 기존 리스트에 새 숫자 추가
        setNumber("");
        inputEl.current.focus(); // ref 참조
    }, [number, list]); // number 값이 바뀔 때만 함수 생성

    // useMemo 메모이제이션, 리스트의 평균값을 계산
    const avg = useMemo(() => getAverage(list), [list]);

    return (
        <div>
            <input value={number} onChange={onChange} ref={inputEl} />
            <button onClick={onInsert}>등록</button>
            <ul>
                {list.map((value, index) => (
                    <li key={index}>{value}</li>
                ))}
            </ul>
            <div>
                <b>평균값:</b> {avg}
            </div>
        </div>
    );
};

export default Average;

 

https://stackblitz.com/edit/react-basecamp-vuckgrzw?embed=1&file=src%2FAverage.jsx