useRef

렌더링과 관계 없는 값을 관리할 때 사용한다.
DOM 요소에 직접 접근하고 싶을 때, 이전 상태의 값을 기억하거나 이전 렌더링 정보를 저장할 때 사용한다.
-> 타이머ID, 이전 스크롤 위치, DOM의 요소 참조, API 응답 시간 체크용 시작시간, 렌더링과 상관없는 캐시값을 기억해야할 때 주로 사용한다.

✅ 기본 사용법

export default function Counter () {
  let ref = useRef(0);
  
  function handleClick(){
  	ref.current = ref.current + 1;
    alert(`You clicked ${ref.current} times!`); 
  }
  
  return (
    <button onClick={handleClick}>
  	  Click me!
    </button>
  )
}

➕ Ref 로 DOM 조작

import { useRef } from "react";

export default function Form() {
  const inputRef = useRef();

  const handleClick = () => {
    inputRef.current.focus();
  };
  return (
    <>
      <input ref={inputRef} />
      <button onClick={handleClick}>Focus the input</button>
    </>
  );
}

❗ ref.current는 이벤트 헨들러, useEffect에서 읽거나 써야 한다.

// ✅ Effect 안에서 읽고 쓰거나, 함수 안에서 읽고 써야 한다.
function App(){
  useEffect(() => {
  	ref.current = 1;
  })
  
  function handleClick(){
  	ref.current = ref.current + 1;
  }
}

// ❌렌더링 중에 쓰거나, 렌더링 중에 읽으면 안된다.
function App(){
  ref.current = 1;
  return (
  	<h1>{ref.current}</h1>
  )
}