useRef 개요

---

React를 공부하면서, React 애플리케이션을 만들 때 DOM을 직접 조작하는 것은 지양해야한다고 배웠지만, 개발을 하다보면 DOM을 직접 건드려야하는 상황이 발생하기도 한다. 이럴 때 사용할 수 있는 것이 바로 useRef 라는 Hook 함수다.

아래와 같이 DOM 엘리먼트의 주소값을 활용해야 하는 경우 useRef 로 DOM 노드, 엘리먼트, 그리고 React 컴포넌트 주소값을 참조할 수 있다.

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

DOM reference를 잘 활용할 수 있는 useRef

---

const 주소값을_담는_그릇 = useRef(참조자료형)
return (
    <div>
      <input ref={주소값을_담는_그릇} type="text" />
    </div>
);

useRef()를 사용하야 Ref 객체를 만들고, 이 객체를 우리가 선택하고 싶은 DOM 에 ref라는 속성에 주소값을_담는_그릇을 값으로 할당하면 주소값을_담는_그릇 변수에는 input DOM 엘리먼트의 주소가 담긴다. 그러면, Ref 객체의 .current 값은 우리가 원하는 DOM 을 가르키게 되고 이 주소값으로 향후 다른 컴포넌트에서 input DOM 엘리먼트를 활용할 수 있다.

이 주소값은 컴포넌트가 re-render 되더라도 바뀌지 않기 때문에 이 특성을 활용하여 아래의 제한된 상황에서 useRef 를 활용할 수 있다.

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

제시된 상황 제외한 대부분의 경우 기본 React 문법을 벗어나 useRef 를 남용하는 것은 부적절하고, React의 특징이자 장점인 선언형 프로그래밍 원칙과 배치되기 때문에, 조심해서 사용해야 한다.

컴포넌트 안에서 조회 및 수정 할 수 있는 변수를 관리하는 useRef

---

useRef 로 관리하는 변수는 값이 바뀐다고 해서 컴포넌트가 리렌더링되지 않니다. 리액트 컴포넌트에서의 상태는 상태를 바꾸는 함수를 호출하고 나서 그 다음 렌더링 이후로 업데이트 된 상태를 조회 할 수 있는 반면, useRef 로 관리하고 있는 변수는 설정 후 바로 조회 할 수 있다.

다음 변수를 사용하여 값을 관리할 수 있다.

• setTimeout, setInterval 을 통해서 만들어진 id
• 외부 라이브러리를 사용하여 생성된 인스턴스
• scroll 위치