[React] Hooks - useMemo

import { useState } from "react";

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

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

  const onChange = (e) => {
    setNumber(e.target.value);
  };

  const onInsert = (e) => {
    const NextList = list.concat(parseInt(number));
    setList(NextList);
    setNumber("");
  };

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

reduce() 함수

배열의 각 요소에 대해 주어진 reducer 함수를 실행하고 하나의 결과값으로 반환

const sum = numbers.reduce((a, b) => a + b);

➡ numbers라는 배열의 각 요소에 reducer 함수인 ( a + b )를 실행

concat() 함수

인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새로운 배열로 반환

list.concat(parseInt(number));

➡ input으로 입력 받은 number의 값들을 기존 배열인 list( [] )에 합침

parseInt() 함수

문자열 인자를 구분, 분석하여 특정 진수의 정수를 반환

list.concat(parseInt(number));

➡ input으로 입력 받은 number의 값을 정수로 반환

map() 함수

배열 내의 모든 요소 각각에 대해서 주어진 함수를 호출한 결과를 모아 새로운 배열로 반환

{list.map((value, index) => (
          <li key={index}>{value}></li>
        ))}

➡ 배열 list의 index를 통해 value 값 출력

➡ 글자 입력에도, 등록 버튼을 누를때에도 getAverage 함수가 호출됨 그래서 useMemo Hook을 사용하면 이러한 작업을 최적화 할 수 있다.

useMemo

함수 내부에서 발생하는 연산을 최적화할 수 있고 렌더링하는 과정에서 특정 값이 바뀌었을 때만 연산을 실행하고, 원하는 값이 바뀌지 않았다면 이전에 연산했던 결과를 다시 사용하는 방식이다.

import { useState, useMemo } from "react";

const getAverage = (numbers) => {
  console.log("평균값 계산 중..");
  if (numbers.length === 0) return 0;
  const sum = numbers.reduce((a, b) => a + b); // numbers라는 배열의 각 요소에 reducer 함수인 ( a + b )를 실행
  return sum / numbers.length;
};

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

  const onChange = (e) => {
    setNumber(e.target.value);
  };

  const onInsert = (e) => {
    const NextList = list.concat(parseInt(number)); // input으로 입력 받은 number의 값들을 정수로 반환 후 기존 배열인 list( [] )에 합침
    setList(NextList);
    setNumber("");
  };

  const avg = useMemo(() => getAverage(list), [list]); // useMemo(() => {실행할 함수}, 변화감지변수);

  return (
    <div>
      <input value={number} onChange={onChange} />
      <button onClick={onInsert}>등록</button>
      <ul>
        {list.map((value, index) => ( 
          <li key={index}>{value}</li> // 배열 list의 index를 통해 value 값 출력
        ))}
      </ul>
      <div>
        <b>평균값:</b> {avg}
      </div>
    </div>
  );
};
export default AverageuseMemo;

useMemo

useMemo(() => {실행할 함수}, 변화감지변수);

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

➡ list 배열의 내용이 바뀔 때만 getAverage 함수가 호출됨