[React] useRef로 로컬 변수 사용하기

useRef로 특정DOM 선택할때만 사용하는 줄 알았는데, 내가 개발하면서 애매했던 순간들에 유용하게 사용할 수 있는 녀석이었다!
useState로 관리하기엔 상태를 바꾸면 컴포넌트가 리렌더링되고, 그냥 변수를 선언해서 사용하면 다음 리렌더링 될 때 변수값이 초기화되고...

굳이 리렌더링 하지 않고 초기화되지 않는 값을 관리하고 싶다면 useRef를 사용할 수 있다고 한다!

useRef로 컴포넌트 안의 변수 만들기

1. setTimeout, setInterval 의 id
2. 외부라이브러리를 사용하여 생성된 인스턴스 scroll 위치 등 에 사용한다.

const App = () => {
  
  const nextId = useRef(4);
  
  const onCreate = () => {
      console.log(nextId.current); //4
      nextId.current += 1; // 5,6,7...
  }
}

해당 값을 useState로 관리해도 되지만 굳이 리렌더링 할 필요가 없는 상태이기 때문에 useRef로 로컬 변수를 만들어 사용하는 예시이다🧐

출처: 벨로퍼트 with React