8.6 useRef

    useRef Hook은 함수형 컴포넌트에서 ref를 쉽게 사용할 수 있도록 해 줍니다. Average 컴포넌트에서 등록 버튼을 눌렀을 때 포커스가 인풋 쪽으로 넘어가도록 코드를 작성해 보겠습니다.

    Average.js

    import React, { useState, useMemo, useCallback, useRef } 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);
      }, []); // 컴포넌트가 처음 렌더링될 때만 함수 생성
    const onInsert = useCallback(() => {
        const nextList = list.concat(parseInt(number));
        setList(nextList);
        setNumber('');
        inputEl.current.focus();
      }, [number, list]); // number 혹은 list 바뀌었을 때만 함수 생성
     
      const avg = useMemo(() => getAverage(list), [list]);
     
      return (
        <div>
          <input value={number} onChange={onChange} ref={inputEl} />
          <button onClick={onInsert}>등록</button>
          <ul>
            {list.map((value, index) => (
              <li key={index}>{value}</li>
            ))}
          </ul>
          <div>
            <b>평균값:</b> {avg}
          </div>
        </div>
      );
    };
     
    export default Average;

     

    useRef를 사용하여 ref를 설정하면 useRef를 통해 만든 객체 안의 current 값이 실제 엘리먼트를 가리킵니다.

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