🪞 useRef

useRef는 React에서 DOM 요소에 직접 접근하거나,
렌더링과 무관한 데이터를 저장할 때 사용하는 훅입니다.

useState와 달리 값이 바뀌어도 리렌더링을 발생시키지 않습니다.

1️⃣ useState vs useRef 차이점

• useState는 화면에 표시되는 값 관리
• useRef는 비표시 값 (렌더링과 무관한 값) 또는 DOM 제어에 적합

2️⃣ useRef 기본 문법

const ref = useRef(initialValue);

• ref는 { current: initialValue } 형태의 객체를 반환
• ref.current를 통해 값을 읽거나 수정 가능
• ref.current가 바뀌어도 컴포넌트는 리렌더링되지 않음

3️⃣ useRef 사용 예제

🧐 예제 1: DOM 요소에 접근하기

import { useRef } from "react";

function InputFocus() {
	const input = useRef<HTMLInputElement>(null);

	const handleFocus = () => {
		inputRef.current?.focus(); // input 요소에 직접 접근
	}

	return (
		<div>
			<input ref={inputRef} type="text" placeholer="이름을 입력하세요.">
			<button onClick={handleFocus}>포커스 주기</button>
		</div>
	)
}

• ref를 input에 연결하면 JS의 document.querySelector처럼 DOM에 직접 접근 가능
• React에서 DOM 조작을 해야 할 때 안전한 방법

🧐 예제 2: 렌더링과 무관한 값 저장하기

import { useEffect, useState, useRef } from "react";

function RenderCounter() {
	const [count, setCount] = useState(0);
	const renderCount = useRef<number>(0); // 리렌더링 횟수 저장

	useEffect(() => {
		renderCount.current += 1;
	})

	return (
		<div>
			<p>Count: {count}</p>
			<p>렌더링 횟수: {renderCount.current}</p>
			<button onClick={() => setCount(count + 1)}>+</button>
		</div>
	);
}

• renderCount는 값이 변경되어도 리렌더링되지 않음
• 렌더링 횟수, 타이머 ID, 이전 값 등을 저장할 때 유용

🧐 예제 3: 이전 상태 기억하기

import { useEffect, useState, useRef } from "react";

function PreviousValueExample() {
	const [count, setCount] = useState(0);
	const prevCount = useRef<number>();

	useEffect(() => {
		prevCount.current = count;
	}, [count])

	return (
		<div>
			<p>현재 값: {count}</p>
			<p>이전 값: {prevCount.current}</p>
			<button onClick={() => setCount(count + 1)}>+</button>
		</div>
	);
}

• useRef를 이용해 상태 업데이트 전의 값을 추적할 수 있음