ref는 컴포넌트에 식별가능한 유일한 이름을 붙여주는 기능이었습니다. 이 기능은 클래스형 컴포넌트에서만 사용이 가능했었는데요. useRef Hook를 사용하면, 함수형 컴포넌트에서도 ref 기능을 사용할 수 있습니다. ref가 무엇인지는 이 포스트를 참조해주세요.

useRef

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태그의 요소를 가리키게 됩니다.