이 전에 부트캠프를 다니면서 useRef에 대해 살펴보았지만, TypeScript와 함께 조금 더 심도있게 (?) 살펴보자!

📌 TypeScript에서 useRef 사용법

TypeScript에서 useRef를 사용할 경우 제네릭과 초기값을 설정해야 한다.

📍 값 저장 용도

• 제네릭 : 값의 타입을 넣어준다.
• 초기값 : 타입에 맞는 초기값을 할당해준다.

const count = useRef<number>(0);
const text = useRef<string>("");

📍 DOM 취득 용도

• 제네릭 : 참조하는 HTML 엘리먼트를 넣어준다.
• 초기값 : null을 넣어준다.

(useRef로 취득하는 DOM은 최초 mount 되기 전엔 null이다. 컴포넌트 함수의 return 부분이 호출되어 실제 DOM에 반영되기 전에 참조하려고 하기 때문이다. 따라서 useEffect를 잘 활용해주어야 한다!)

const buttonRef = useRef<HTMLButtonElement>(null);
const inputRef = useRef<HTMlInputElement>(null);

📌 useRef의 ref 객체 타입

📍 값 저장 용도

ref 객체는 React.MutableRefObject<제네릭> 타입이 되며, ref객체.current의 값 수정이 가능하다.

React.MutableRefObject<number>

📍 DOM 취득 용도

ref 객체는 React.RefObject<제네릭> 타입이 되며, ref.current(참조하는 DOM) 값 자체는 수정이 불가능하다.
단, ref.current.속성(DOM객체 속성)은 수정이 가능하다.

( const inputRef = useRef<HTMLInputElement|null>(null);처럼 제네릭에 null을 명시한 경우, ref 객체는 MutableRefObject<HTMLInputElement|null>타입으로 정의된다. )

React.RefObject<HTMLButtonElement>
React.RefObject<HTMLInputElement>

📌 ref 기능 callback과 함께 쓰기

https://itchallenger.tistory.com/673
(미래를 위한 참조용)

< 참고 : https://curryyou.tistory.com/488 >