useRef

react 기반으로 구현할 때 useState 와 useEffect 만큼은 아니지만 자주 쓰는 훅 중 하나인 useRef
왜 쓰는지, 그리고 어떻게 쓰는지 매우 간단하게 알아보자

왜 쓰는가?

DOM 요소를 참조하기 위해
요소에 포커스를 설정하거나, 직접적인 DOM 조작을 할 수 있음
ex) 입력 필드에 포커스를 주기, 애니메이션 직접 조작하기

DOM을 조작하는 것은 querySelector와 같은 기능을 하지만, 참조하는 방법에 차이가 있다.
useRef는 선언적으로 참조하기 때문에, 한번 선언을 하면 컴포넌트의 라이프사이클 동안 일관적으로 유지되는 반면, querySelector는 명령적으로 참조하기 때문에 실행될 때마다 DOM을 새로 검색한다.
= 리소스 낭비 이슈 + 안정성 이슈를 유발할 수 있음

값을 저장하고 추적하기 위해
렌더링 사이에 값(이전 상태, 구독 ID 등등)을 유지할 수 있음

값을 저장하고 추적하는(= 상태를 관리하는) 것은 useState와 같은 기능을 하지만, 값이 바뀌어도 렌더링이 일어나지 않는 점이 다르다!

어떻게 쓰는가?

import React, { useRef } from 'react';

function MyComponent() {
  const myRef = useRef(null); // ref 객체 생성

  return (
    <div>
      <input ref={myRef} type="text" /> {/* input 요소에 ref 연결 */}
      <button onClick={() => myRef.current.focus()}>Focus Input</button> {/* ref를 사용하여 input 요소에 포커스 설정 */}
    </div>
  );
}

추가로 알아볼 것

프로그래밍적으로 선언과 명령이 어떻게 다른지 톺아보기
리액트의 프로그래밍 사이클 - 왜 선언적 프로그래밍인가?