• 목록

✅ 초보보다 고수가 자주 놓치는 ref의 정체

useRef는 상태가 아니다

useRef는 보통 이렇게 쓴다:

const inputRef = useRef<HTMLInputElement>(null);

하지만 종종 상태처럼 써버리는 실수가 나온다:

const countRef = useRef(0);
countRef.current += 1;

✅ 문제는 뭘까?

• ref.current가 바뀌어도 컴포넌트는 리렌더링되지 않는다.

• 따라서 화면에 반영되지 않는 값을 추적할 때만 써야 한다.

✅ 언제 쓰는 게 맞을까?

• DOM 접근: inputRef.current.focus()

• 값 유지: setInterval 내부 값 추적

• 이전 값 저장: const prev = useRef(value);

ref는 UI에 영향을 주지 않는 상태를 저장하는 용도로만 써야 한다.