[React] Hooks - useRef

이번엔 함수형 컴포넌트에서 Ref를 사용할 수 있게 만들어주는 Hook인 useRef를 알아보겠습니다. 그 전에 Ref에 대한 설명은 아래 포스트를 참조해주세요.

2021.11.12 - [Programming/React] - ref

ref

---

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

---

일단 제가 현재 상황에서 소개하는 Hooks는 여기까지입니다. 사실 더 많은 Hooks가 있지만, 다른 개념들을 알고나서 활용이 필요하기 때문에, 그 개념들을 소개한 다음에 그에 대응되는 Hook를 소개하는 식으로 나아가려고 합니다.

참조

https://ko.reactjs.org/docs/hooks-reference.html#useref

Hooks API Reference – React