useRef 타입스크립트

① 매개 변수의 타입과 제네릭의 타입이 T로 일치

(current 프로퍼티 직접 변경 가능)

function useRef<T>(initialValue: T): MutableRefObject<T>;

==>

interface MutableRefObject<T> {
	current: T;
}

위의 경우, useRef의 타입과 initialValue(변수)의 타입이 일치합니다. 

이런 경우 current property를 변경 가능합니다.

const numberRef = useRef<number>(3)

위 코드를 보겠습니다.

매개 변수가 3이며 useRef의 타입도 number로 지정했습니다. 둘이 일치해서 numberRef의 타입이 MutableRefObject로 반환합니다.

 

② 매개 변수의 타입이 null을 허용하는 경우 RefObject 반환

(RefObject current는 readonly 이므로 프로퍼티 직접 수정 불가)

function useRef<T>(initialValue: T | null): MutableRefObject<T>;

==>

interface MutableRefObject<T> {
	readonly current: T | null;
}

위의 경우, useRef의 타입이 T며, initialValue(변수)의 타입이 T 혹은 null입니다. 둘이 불일치합니다.

이런 경우 current는 readonly이므로 property를 직접 수정 불가능합니다.

 

③ 타입을 제공하지 않아서 제네릭 타입이 undefined인 경우

(MutableRefObject 반환 => current 직접 변경가능)

function useRef<T = undefined>(initialValue: T | null): MutableRefObject<T | undefined>;

위의 경우, 타입을 제공하지 않아서 useRef의 타입이 undefined인 경우, MutableRefObject 반환하며 current직접 변경 가능합니다. ①경우와 유사합니다.