[JS, React] ref, useRef

react의 다양한 라이브러리들을 사용하다 보면 ref가 사용되는 것을 많이 볼 수 있다. 항상 ref는 어떤 기능을 하는 것인지 궁금했었기에 useRef와 ref에 대해 찾아보았다.

우선 JavaScript에서 getSelector, getElementById를 통해서 HTML 태그 (DOM)을 선택할 수 있다는 것은 알고 있었다. 하지만 나는 React에서는 이런 문법을 사용하기보다는 직접 그 태그 안에서 코드를 작성했기 때문에 리액트는 Dom Selector를 사용 안 하는 줄 알았지만, useRef가 이런 기능을 도와주고 있었던 것이다.

그렇다면 언제 useRef와 ref를 사용하는 것일까? 나는 외부의 DOM을 활용하여 다른 DOM의 상태에 영향을 주고 싶을 때 ref를 사용한다고 생각했다.

즉, HTML의 비디오 태그의 현재 비디오를 외부의 버튼으로 실행시키거나, 버튼을 눌렀을 때 사용자가 어떤 값을 눌렀을 때 Input태그의 값을 넣게 유도하도록 focus를 줄 때 사용해 줄 수 있을 것이다. 더 나아가서 Three, js로 렌더링 한 모델들에게도 ref를 통해 외부에서 조작할 수 있지 않을까?

어쨌든 useRef가 뭔지 알고 나니 사용법은 매우 간단했다. 특히 react의 useRef 훅을 사용하여 더 쉽게 이해할 수 있었다.

 const inputRef = useRef<HTMLInputElement>(null);
  const onClick = () => {
    inputRef.current?.focus();
  };
  return (
	<>
      <input placeholder="grab me" ref={inputRef} />
      <button onClick={onClick}>click me</button>
    </>

위의 코드는 위 문단에서 말한 두 번째 예시인 Click me 버튼을 클릭했을 때 input 태그가 focus 되도록 하는 코드이다.

코드를 설명하자면 useRef를 통해 ref객체를 만들 수 있다. 이 객체는 current 안에 변경 가능한 값들을 가지고 있고 그중 focus 함수를 실행시킨 것이다. 

(console에 inputRef를 찍어보았을 때, current안에 엄청나게 많은 값들이 존재하는 것을 확인할 수 있었다. 이를 보면서 상황에 맞게 활용할 수 있을 것이다.)

Input태그와 Ref객체인 inputRef를 ref를 통해 연결한 후, 버튼에 inputRef.current.focus를 실행하는 클릭이벤트를 넣어 코드를 구현했다.

추가로 useRef를 활용하여 어떤 태그의 값이나 변수들을 바꿔준다면 react는 이러한 변화에 대해 다른 컴포넌트나 부모요소들에게 알려주지 않기 때문에 주의해야한다고 한다. 하지만 이 점이 요소들을 리렌더링 하지 않는 다는 점에서 잘 활용할 수 있을 것 같다.

Ref를 모르고 코드를 봤을 때는 이게 무엇일까 항상 고민했었는데 막상 찾아보니 정말 쉽고 편리한 도구인 것 같다.