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

// input이 입력 될 때마다 sum... 이 찍힌다. 매번 rerendering 되고 있는 것이다.
function sum(persons) {
  console.log("sum...");
  return persons.map((person) => person.age).reduce((l, r) => l + r, 0);
}

const UseMemoComponent = (props) => {
  const [value, setValue] = useState("");
  const [persons] = useState([
    { name: "malza", age: 29 },
    { name: "hoon", age: 21 },
  ]);

// memo 를 사용함으로써 같은 값이라면 더이상 rerendering 하지않는다.
  const count = useMemo(() => {
    sum(persons);
  }, [persons]);

  return (
    <div>
      <input type="text" value={value} onChange={change} />
      <p>{count}</p>
    </div>
  );

  function change(e) {
    setValue(e.target.value);
  }
};

export default UseMemoComponent;