[React] reference 사용 방법

reference는 react 코드를 이용해 HTML 요소를 지정하고 가져올 수 있는 방법입니다. 다시 말해서 자바스크립트로부터 HTML 요소를 가져오고 수정할 수 있도록 해줍니다.

사용

useRef를 사용하여 HTML 요소를 가져옵니다. 아래 코드는 button 클릭 시 input을 포커싱하고 해제하는 예제입니다.

import { useRef } from 'react';

function RefEx() {
  const inputRef = useRef<HTMLInputElement>(null);
  const onClick = () => {
    inputRef.current?.focus();
    // 5초 뒤에 focus 사라짐
    setTimeout(() => {
      inputRef.current?.blur;
    }, 5000);
  };
  return (
    <div>
      <input ref={inputRef} type="text" placeholder="input" />
      <button onClick={onClick}>click</button>
    </div>
  );
}

export default RefEx;

typescript 사용하므로 HTMLInputElement를 지정하였습니다. useRef를 사용하여 HTML 요소를 가져왔지만 수정할 경우에는 HTMLInputElement 지정한 것 처럼 일반 자바스크립트를 이용합니다.

useRef()

useRef는 .current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환합니다. 반환된 객체는 컴포넌트의 전 life cycle을 통해 유지될 것입니다.
일반적인 사용 사례는 자식에게 접근하는 경우입니다.
본질적으로 useRef는 .current 프로퍼티에 변경 가능한 값을 담고 있는 "상자"와 같습니다.

참고

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