ref
는 컴포넌트에 식별가능한 유일한 이름을 붙여주는 기능이었습니다. 이 기능은 클래스형 컴포넌트에서만 사용이 가능했었는데요. useRef
Hook를 사용하면, 함수형 컴포넌트에서도 ref 기능을 사용할 수 있습니다. ref
가 무엇인지는 이 포스트를 참조해주세요.
ref
를 간단하게 소개하자면 컴포넌트에 html의 id속성처럼 식별자를 붙여주는 기능이었습니다. 다만 이 기능은 클래스형 컴포넌트에서만 사용가능했었는데요. 이를 함수형 컴포넌트에서도 사용가능하도록 만들어준 Hook가 useRef
입니다. 마찬가지로 지난번에 만들었던 컴포넌트를 통해 useRef를 알아보겠습니다.
import React, {Fragment, useState, useMemo, useCallback, useRef} from 'react';
const getTotal = numbers => {
let total = 0;
console.log('getTotal() 호출');
numbers.forEach(value => {
total += value;
});
return total;
};
const AddInputNum = () => {
const [numbers, setNumbers] = useState([]);
const [input, setInput] = useState('');
const inputEl = useRef(null); //useRef
const onChange = useCallback(e => {
setInput(e.target.value);
}, []);
const onInsert = useCallback(e => {
const nextNumber = numbers.concat(parseInt(input));
setNumbers(nextNumber);
setInput('');
inputEl.current.focus(); //.current로 접근
}, [input, numbers]);
const total = useMemo(() => getTotal(numbers), [numbers]);
return (
<Fragment>
//요소에 ref 달기
<input ref={inputEl} value={input} onChange={onChange}/>
<button onClick={onInsert}>입력</button>
<div>
<span>총합: </span>{total}
</div>
</Fragment>
);
};
export default AddInputNum;
const inputEl = useRef(null);
inputEl.current.focus();
위 코드가 useRef
를 선언하는 과정입니다. 이렇게 선언된 useRef
는 current
라는 프로퍼티를 통해서 선언될 때 전달해준 인자(여기서는 null)로 초기화된 ref 객체를 반환해 주게 됩니다. 그리고 예제에서 ref를 다음과 같이 input 태그에 삽입했습니다.
<input ref={inputEl} value={input} onChange={onChange}/>
이렇게 되면 useRef로 생성한 객체는 input태그의 요소를 가리키게 됩니다.