useRef

React 함수 컴포넌트에서 DOM 요소에 접근하거나,
컴포넌트의 인스턴스 변수를 생성하고 관리하는 데 사용되는 Hook입니다.

useRef를 사용하면 DOM 요소에 직접 접근하거나
컴포넌트 내에서 변수를 저장하고 업데이트할 수 있습니다.

useRef의 기본 사용 사례:

1. DOM 요소에 접근하기
   useRef를 사용하여 DOM 요소에 접근할 수 있습니다.
   이는 특정 DOM 요소를 선택하고 조작해야 하는 경우 유용합니다.

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

function MyComponent() {
  const myRef = useRef();

  useEffect(() => {
    myRef.current.focus();
  }, []);

  return <input ref={myRef} />;
}

2. 변수 저장 및 업데이트
   useRef를 사용하여 컴포넌트 내에서 변수를 저장하고 유지할 수 있습니다.
   이 변수는 컴포넌트가 다시 렌더링되어도 변경되지 않습니다.
   간단하게 말하자면 useRef 를 통해 변수 값을 저장해도 리 렌더링이 발생하지 않습니다.

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

function MyComponent() {
  const counter = useRef(0);

  useEffect(() => {
    // counter.current을 사용하여 변수에 접근하고 업데이트합니다.
    counter.current += 1;
    console.log(counter.current);
  }, []);

  return <div>Counter: {counter.current}</div>;
}

useRef는 일반적으로 useState와 다르게 상태를 업데이트하고 다시 렌더링하는 것이 아니라,
데이터를 변경하지 않고 컴포넌트 간에 값을 공유하거나 DOM 요소에 접근하는 데 사용됩니다.