useRef. 렌더링과 상관없이 참조

import { useCallback, useMemo, useRef, 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 inputEl = useRef(null);

  const onChange = useCallback((e) => {
    setNumber(e.target.value);
  }, []); // only create function when it is first rendering

  const onInsert = useCallback(
    (e) => {
      const nextList = list.concat(parseInt(number)); // concat rather than push for efficiency
      setList(nextList);
      setNumber('');
      inputEl.current.focus();
    },
    [number, list]
  ); // create function when number | list is updated

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

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

export default Average;

useRef는 왜 사용하는지 잘 모르겠다.

리액트 문서에 따르면 "useRef is a React Hook that lets you reference a value that's not needed for rendering"이라 한다. 렌더링과 무관하게 데이터를 참고할 때 사용하는 것으로 보인다. 

그래도 여전히 무슨 말인지 모르겠다. 지금 프로젝트에 필수적인 훅은 아닌 것으로 보이니 일단 넘어가자.