[React] Hooks : useRef( )

📝 useRef

useRef는 함수형 컴포넌트에서 ref를 쉽게 사용할 수 있도록 해 줍니다.

📜 useRef 활용

Average 컴포넌트에서 등록 버튼을 눌렀을 때 focus가 input 쪽으로 넘어가도록 하는 코드입니다.

// 리스트에 숫자를 추가하면 추가된 숫자들의 평균을 보여수는 함수형 컴포넌트
import { 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(e => {
    	const nextList = list.concat(parsInt(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 값이 실제 element를 가리킵니다.