[기술면접] useRef

useRef가 필요한 상황을 예시를 들어 설명해주세요

useRef는 React 함수형 컴포넌트에서 DOM 요소에 접근하거나, 컴포넌트의 상태를 변화시키지 않으면서 컴포넌트 내부에서 변수를 유지하는 용도로 사용됩니다.
이러한 useRef가 필요한 상황은 input 태그에서 onChange 를 하는 상황입니다. onChange 를 하면 한글자 한글자가 변할 때 마다 컴포넌트가 리렌더링 되는데, useRef 훅을 사용해서 onSubmit 을 했을 때 렌더링이 일어나면 그때서야 화면에서 onChange 된 값이 보여지도록 하는 것입니다. 이로인해 불필요한 리렌더링을 줄일 수 있습니다.

필요한 상황

React만 가지고 거의 대부분의 프론트엔드 요구사항을 구현할 수 있지만,

React를 사용하는 프로젝트에서도 가끔씩 DOM 을 직접 선택해야 하는 상황이 발생 할 때도 있다. 예를 들어서 특정 엘리먼트의 크기를 가져와야 한다던지, 스크롤바 위치를 가져오거나 설정해야된다던지, 또는 포커스를 설정해줘야된다던지 등 정말 다양한 상황이 있을 것이다.

→React는 이런 예외적인 상황에서 useRef로 DOM 노드, 엘리먼트, 그리고 React 컴포넌트 주소값을 참조할 수 있다.

예시

import React, { useRef } from 'react';

function Example() {
  const inputRef = useRef(null);

  function handleClick() {
    inputRef.current.focus();
  }

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Focus</button>
    </div>
  );
}

위 예제에서는 useRef를 사용하여 input 요소에 대한 참조를 만듭니다. 그리고, handleClick 함수에서는 inputRef.current.focus()를 호출하여 해당 요소에 포커스를 설정합니다.

useRef를 사용할 때는, useRef()를 호출하여 변수를 생성하고, 이 변수를 참조할 DOM 요소나 컴포넌트 내부에서 유지할 변수에 할당합니다. 이후, current 프로퍼티를 사용하여 해당 변수의 값을 읽거나 쓸 수 있습니다.

useRef를 사용하여 유지되는 변수는, 컴포넌트가 렌더링될 때마다 초기화되지 않습니다. 따라서 컴포넌트 내부에서 유지해야 하는 값이, 렌더링 결과에 영향을 주지 않으면서 계속 유지되어야 하는 경우에 useRef를 사용합니다.