useRef 개요

• React 로 DOM 을 직접 조작하는 HOOK

• useRef 가 언제 왜 필요할까요?
• useRef 를 어떻게 사용할까요?

React 로 불가능한 개발요구 사항이 있습니다.

특히 DOM Element 의 주소값을 활용하는 경우

• focus
• text selection
• media playback
• 애니메이션 적용
• d3.js, greensock 등 DOM 기반 라이브러리

useRef 는 주소값을 참조할 수 있습니다.

• 주소값은 리렌더링 되어도변하지 않습니다.
• useRef 설명 코드

// useRef 를 활용해 어떤 주소값이든 변수에 답을 수 있습니다.
const 주소값 = useRef(참조자료형)
return (
  <div>
    {/* 주소값에 input DOM 주소 할당 */}
  	<input ref={주소값} type="text" />
  </div>
);

• useRef 예시 코드

function InputWithFocusBtn() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    inputEl.current.focust();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus</button>
    </>
  );
}

export default InputWithFocusBtn;

useRef 주의점

선언형 프로그래밍 원칙과 반대

• useRef 남용하면 안됩니다.
• 특정한 상황에서만 사용합니다.

대표적인 useRef 활용처

• 인풋이 연속된 경우 엔터 입력시 다음 인풋으로 focus 변경
• 비디오 플레이어에서 사용