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
'React' 카테고리의 다른 글
React v18 주요 변경점 (0) | 2022.07.14 |
---|---|
TIL | React + twin.macro(with styled-component) 세팅 (0) | 2022.06.10 |
TIL | 간단한 custom hook 만들어보기 2 (0) | 2021.12.20 |
TIL | 간단한 custom hook 만들어보기 1 (0) | 2021.12.15 |
TIL | CRA 없이 React 세팅하기 (0) | 2021.11.25 |