ch04.useMemo

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

• import React, { 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 Average = () => {
    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 Average;

• import React, { useState } from "react";
  import Average from "./Average";
  const App = () => {
    return <Average />;
  };
  
  export default App;

• 등록 버튼을 누를 때뿐만 아니라 Input 태그의 내용이 수정이 될 때에도 getAverage함수가 호출이 된다.
  • Input내용을 바꿀 때에는 getAverage함수를 호출할 필요가 없다.(자원 낭비)
  • useMemo를 활용한다
  • 특정 값이 바뀌었을 때만 연산을 실행하고 원하는 값이 바뀌지 않았다면 이전에 연산했던 결과를 다시 사용하는 방식

• import React, { useState, useMemo } 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 Average = () => {
    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("");
    };
    const avg = useMemo(() => getAverage(list), [list]);//avg 값이 변경되었을 때에만 계산하도록 수정
    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>
          {avg}
        </div>
      </div>
    );
  };
  
  export default Average;