useRef는 언제 사용하나요?

컴포넌트 내에서 변경 가능한 값을 저장하고 관리할 수 있게 해줌
DOM 요소에 접근, 값을 유지하면서 렌더링을 트리거하지 않기 위해 사용

1. DOM 요소 접근
   만약 특정 DOM 요소에 직접 접근하고 싶을 때 useRef()를 사용하여 해당 요소의 참조를 얻을 수 있음
   이는 useEffect()나 이벤트 핸들러 내에서 해당 DOM 요소에 직접 작업을 수행할 때 유용
   ex - 입력 필드에 포커스 설정하고 싶을 때, useRef() 사용해 input 요소에 접근 가능

const inputRef = useRef(null);

useEffect(()=> {
	inputRef.current.focus(); // 컴포넌트 마운트 시 input에 포커스를 맞춘다.
}, []);

return <input ref={inputRef} />;

2. 렌더링 트리거하지 않기 위해
   일반적으로 상태 값 관리할 때 사용하는 useState()는 상태 변화가 리렌더링을 트리거하는 반면, useRef()는 값이 변경되어도 리렌더링을 트리거하지 않음
   ex - 타이머 id 추적할 때 useRef() 사용 가능

const timerRef = useRef(null);

const startTimer = () => {
	timerRef.current = setInterval(() => {
    	console.log('타이머 실행')
    }, 1000);
};

const stopTimer = () => {
	clearInterval(timerRef.current); // 타이머를 정지한다.
};

위 예시에서 useRef()를 이용해 타이머 아이디 추적하면서도 해당 상태 값이 업데이트 될 때 컴포넌트 리렌더링 하지 않음