UseRef란?

useRef는 React 함수 컴포넌트에서 DOM 요소에 접근하는 데 사용되는 Hook입니다.

useRef를 사용하면 DOM 요소에 직접적으로 접근할 수 있습니다.

또한, useRef를 사용하면 함수 컴포넌트에서 변수를 유지하고 변경할 수도 있습니다.

---

DOM 요소에 직접 접근하기

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

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

  useEffect(() => {
    inputRef.current.focus(); // input 요소에 포커스 설정
  }, []);

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

---

useState와 함께 사용하기

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

function ExampleComponent() {
  const [count, setCount] = useState(0);
  const countRef = useRef(count);

  useEffect(() => {
    countRef.current = count;
  }, [count]);

  const handleClick = () => {
    setCount(countRef.current + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}

랜더링이 되면 컴포넌트안에 있는 변수의 값이 초기화가 발생된다.
그래서 useRef를 사용하면 간편하게 변경된 값을 사용할수 있다.