8.4 useMemo

    useMemo를 사용하면 함수형 컴포넌트 내부에서 발생하는 연산을 최적화할 수 있습니다. 먼저 리스트에 숫자를 추가하면 추가된 숫자들의 평균을 보여 주는 함수형 컴포넌트를 작성해 봅시다.

    src 디렉터리에 Average.js 파일을 생성하세요.

    Average.js

    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;

    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.