useRef()란?

useRef는 React의 Hook 중 하나로, 렌더링 사이에 값을 "기억"하는데 사용됩니다. 주로 두 가지 주요 목적으로 사용됩니다:

1. DOM 요소에 직접 접근: 일반적으로 React는 선언적 UI를 사용하여 DOM을 조작하지만, 때때로 직접 DOM 요소에 접근해야 할 필요가 있습니다. 예를 들어, 포커스를 설정하거나, 비디오를 재생하는 등의 작업을 할 때 useRef를 사용하여 DOM 요소에 직접 접근할 수 있습니다.
2. 값 저장: useRef는 렌더링 간에 데이터를 저장하는데 사용할 수 있습니다. 이 때 중요한 점은 useRef로 저장된 값이 변경되어도 컴포넌트가 리렌더링되지 않는다는 것입니다. 이는 단순히 데이터를 저장하고, 리렌더링 없이 그 값을 참조하고자 할 때 유용합니다.

useRef 사용 예제:

import React, { useRef, useEffect } from 'react';

function MyComponent() {

  // DOM 요소에 접근하기 위한 ref 생성

  const myInputRef = useRef(null);

  useEffect(() => {

    // 컴포넌트가 마운트된 후, input 요소에 포커스를 맞춤

    myInputRef.current.focus();

  }, []);

  return <input ref={myInputRef} type="text" />;

}

 

이 예제에서 myInputRef는 input 요소에 대한 참조를 저장하고, 컴포넌트가 마운트된 후에 해당 요소에 자동으로 포커스를 맞춥니다. useRef는 이처럼 React에서 제공하는 다른 상태 관리 기능들과는 다르게, 데이터가 변경되어도 컴포넌트의 리렌더링을 유발하지 않는 특징이 있습니다.