useRef란

• useRef란 특정 DOM을 선택할 수 있게 해주는 Hook 함수이다.
• useRef는 .current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환한다.
• useRef로 반환된 객체는 렌더링에 영향을 주지않는다.
• 일반 변수의 경우, 리렌더링이 일어날 때마다 값이 업데이트되지만, useRef로 반환된 객체는 리렌더링이 일어나도 값의 업데이트가 일어나지 않는다.

ref

• ref는 js의 getElementById()처럼, component의 어떤 부분을 선택할 수 있게 해주는 방법이다. 리액트에 있는 모든 component는 reference element를 가지고 있어서, 어떤 component에 ref={변수명}을 넣어주면, 해당 component를 참조하게 된다.

Typescript에서의 useRef

1. useRef<T>(initialValue: T): MutableRefObject<T>

• 인자의 타입과 제네릭의 타입이 T로 일치하는 경우, MutableRefObject<T>를 반환한다.
• MutableRefObject<T>의 경우, current 프로퍼티 그 자체를 직접 변경할 수 있다.

2. useRef<T>(initialValue: T|null): RefObject<T>

• T의 타입이 null이 아니고, initalValue로 null이 들어오면 RefObject를 반환한다.
• current 프로퍼티를 직접 변경 수정할 수 없다.

3. useRef<T=undefined>(): MutableRefObject<T|undefined)

• 타입이 제공되지 않는 경우 MutableRefObject<T|undefined)를 반환한다.