useRef

useRef는 React의 훅 중 하나로, 주로 두 가지 용도로 사용됨.

1. DOM 요소 접근: useRef는 특정 DOM 요소에 접근하기 위해 사용됨. 예를 들어, <input> 요소에 포커스를 주거나, 값을 가져오는 데 유용함.

const inputRef = useRef(null);

const focusInput = () => {
  inputRef.current.focus(); // input에 포커스
};

return (
  <>
    <input ref={inputRef} />
    <button onClick={focusInput}>포커스 주기</button>
  </>
);

2. 값 저장: useRef는 리렌더링 시에도 값이 유지되는 변수처럼 사용 가능함.
   상태(useState)와 달리, useRef는 값이 변경되어도 컴포넌트가 다시 렌더링되지 않아 주로 렌더링에 영향을 주지 않는 값을 저장할 때 사용됨.

const countRef = useRef(0);

const incrementCount = () => {
  countRef.current += 1;
  console.log(countRef.current); // 값 변경되어도 렌더링 X
};

return <button onClick={incrementCount}>클릭</button>;