TIL | useRef의 3가지 정의와 리턴값의 두가지 타입

useRef의 3가지 정의 및 타입

tsx의 useRef를 사용하면서, 기존에 js에서 사용하지 않던 RefObject 타입과 MutableRefObject 타입의 차이점 및 세가지 사용방법에 대해 자세히 알아보자

---

 

useRef

• useRef는, 인자로 넘어온 초깃값을 useRef의 .current 프로퍼티에 저장한다. 특정 DOM에 직접 접근하여 값을 변경하거나, 컴포넌트가 리렌더링이 되는 동안 유지해야할 일정한 값을 저장할 때 사용하곤 한다. 이러한 useRef의 index.d.ts(@types/react 경로에 존재) 에는 세가지 사용 방법이 나와있다.

---

 

1.초깃값 및 제네릭 타입이 주어졌을 경우

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

• 초깃값의 타입과 제네릭의 타입이 T로 일치할 경우 MutableRefObject<T> 타입의 값을 리턴한다.

interface MutableRefObject<T> {
  current: T;
}

• 이때 위처럼 MutableRefObject의 current 는 T 타입을 가지며, index.d.ts의 설명과 더불어 타입의 이름에서도 유추할 수 있듯 current의 값을 변경할 수 있다.

---

 

2. 초깃값 및 제네릭 타입이 주어지지 않았을 경우

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

• 초깃값 및 제네릭의 타입이 존재하지 않을 경우, 자동으로 MutableRefObject 타입의 값을 리턴한다.

예시

const number = useRef<number>(1);
// const number: React.MutableRefObject<number>;

const firstRefElement = useRef<HTMLDivElement>(null!);
// const firstRefElement: React.MutableRefObject<HTMLDivElement>

// DOM을 선택하는 useRef를 사용할때, null이 아님을 확신하거나 해당 DOM의 current의 값을 변경하고자 할 경우 Non-null assertion을 사용하여 타입을 MutableRefObject 타입의 값을 리턴하도록 변경할 수 있다.

---

 

3. 초깃값 및 제네릭 타입의 null을 허용할 경우

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

• 초깃값의 타입이 null을 허용하고자 할 경우, RefObject 타입의 값을 리턴한다.

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

• 이때 위처럼 RefObject의 current는 readonly 속성을 가지므로 current에 접근하여 값을 변경하는 것이 불가하다.

예시

const number2 = useRef<number>(null);
// const number2: React.RefObject<number>

const secondRefElement = useRef<HTMLDivElement>(null);
// const secondRefElement: React.RefObject<HTMLDivElement>

---

 

Reference

• github - DefinitelyTyped
• @types/react/index.d.ts description of useRef
• React Typescript Cheatsheet