[리액트를 다루는 기술] useRef로 원하는 Element 지정하기

import React, {useCallback, useMemo, useRef, useState} from 'react'

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

export default function Average() {
  const [list, setList] = useState([]);
  const [number, setNumber] = useState('');
  const inputEl = useRef(null); // useRef로 변수 생성

  const onChange = useCallback((e) => {
    setNumber(e.target.value);
  }, []) // 처음 렌더링 될 때만 함수 생성

  const onInsert = useCallback(() => {
    const nextList = list.concat(parseInt(number));
    setList(nextList);
    setNumber('');
    inputEl.current.focus(); // useRef로 만든 객체 안 current 값은 엘리먼트를 가리킴
  }, [number, list]) // number나 list 바뀔 때만 함수 생성

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

  return (
    <>
      <input value={number} onChange={onChange} ref={inputEl} />
      {/* ref 프로퍼티에 useRef로 만든 변수 넣기 */}
      <button onClick={onInsert}>등록</button>
      <ul>
        {list.map((value, index) => <li key={index}>{value}</li>)}
      </ul>
      <div>
        <b>평균값: </b>{avg}
      </div>
    </>
  )
}

• useRef 매개변수
  • null을 넣어주는 이유는 빈 레퍼런스를 생성했음을 알려줌
• useRef로 만든 변수를 element의 ref 속성에 값으로 넣어주면 해당 element를 조종 가능
• useRef 변수.current를 꼭 붙여줘야함
• useRef로 변수관리를 하면 변수가 변경돼도 리렌더링 없음