1. useRef란 무엇인가?

1-1. useRef의 정의

useRef는

👉 렌더링과 무관하게 값을 저장하거나 DOM에 직접 접근하기 위한 Hook입니다.

1-2. useState와의 차이

구분 useState useRef
값 변경 setState ref.current
리렌더링 발생 발생 ❌
사용 목적 화면 변경 참조 저장

2. useRef 기본 사용법

2-1. 값 저장 용도

import { useRef } from "react";

const countRef = useRef(0);

countRef.current += 1;
console.log(countRef.current);

📌 렌더링과 무관한 값 저장

2-2. DOM 접근

const inputRef = useRef(null);

<input ref={inputRef} />

inputRef.current.focus();

📌 focus, scroll 위치 등에서 자주 사용