필요한 배경

• React 애플리케이션에서는 DOM을 직접 조작하는건 지양해야한다. 그러나 DOM을 직접 수정해야 할 상황이 발생하기도 하고 이때 사용하는게 useRef이다.
• React만가지고 요구사항을 구현할수 있지만 DOM 엘리먼트의 주소값을 활용해야 할 경우는 DOM을 직접 건드려야 한다.
  • focus
  • text selection
  • media playback
  • animation apply
  • d3.js, greensock 등 DOM 기반 라이브러리 활용

useRef

• React에서 DOM연결을 해주는 HOOK
• useRef는 DOM 노드, element, React component 주소값을 참조할 수 있다.
• useRef.current속성이 전달된 인수로 초기화 된 변경 가능한 ref 객체를 반환
• 포인터변수에 useRef(참조자료형)으로 선언하면 해당 element의 주소가 담기고 다른 컴포넌트에서 활용이가 능하다.
• 해당 주소값은 re-render되더라도 바뀌지 않는다.
• React의 방향성인 선언형 프로그래밍의 원칙과 달라서 useRef를 남용하는건 지양해야 한다.

useRef 활용 (Typescript 내용 포함)

공통적으로 current속성을 가진 객체를 반환한다.

1. useRef(initialValue: T): MutableRefObject;
   • 인자의 타입과 typename의 값이 일치하는경우. return값은 MutableRefObject
   • current를 직접 변경이 가능하다.
2. useRef(initialValue: T|null): RefObject;
   • 인자로 null을 전달 받을 때. return 값은 RefObject
   • cureent를 직접 변경 할 수 없다.
3. useRef<T = undefined>(): MutableRefObject<T | undefined>;
   • typename이 undefined일 경우 MutableRefObject를 반환한다.

2번 예시

import React, { useRef } from "react";

const Focus = () => {
 const firstRef = useRef(null);
 const secondRef = useRef(null);
 const thirdRef = useRef(null);

 const handleInput = (event) => {
   console.log(event.key, event);
   if (event.key === "Enter") {
     console.log(event.target)
     console.log(firstRef)
     if (event.target === firstRef.current) {
       secondRef.current.focus();
       event.target.value = "";
     } else if (event.target === secondRef.current) {
       thirdRef.current.focus();
       event.target.value = "";
     } else if (event.target === thirdRef.current) {
       firstRef.current.focus();
       event.target.value = "";
     } else {
       return;
     }
   }
 };

 return (
   <div>
     <div>
       <input ref={firstRef} onKeyUp={handleInput} />
     </div>
     <div>
       <input ref={secondRef} onKeyUp={handleInput} />
     </div>
     <div>
       <input ref={thirdRef} onKeyUp={handleInput} />
     </div>
   </div>
 );
};

export default Focus;

• useRef() 를 사용하여 Ref 객체를 만들고, 이 객체를 우리가 선택하고 싶은 DOM 에 ref 값으로 설정해주어야 한다. 그러면, Ref 객체의 .current 값은 우리가 원하는 DOM 을 가르키게 된다.
• 처음 useRef로 선언시에는 null이지만 랜더링 할때 ref ={}으로 주소값을 참조하므로 참조하는 대상이 바뀜.