[TypeScript] 🐳 useRef 사용시 에러 해결.

목차

useRef 사용시 에러 해결.

useRef는 React Hook의 일종으로, 인자로 넘어온 초깃값을 useRef 객체의 .current 프로퍼티에 저장한다. DOM 객체를 직접 가리켜서 내부 값을 변경하거나 focus() 메소드를 사용하거나 하는 때에 주로 사용한다. 또한 값이 변경되어도 컴포넌트가 리렌더링되지 않도록 하기 위한 값들을 저장하기 위해서 사용한다. 그런데 만약 TypeScript에서 useRef 사용시, 아래와 같이 제네릭과 초기값을 설정해야 한다.

---

값 저장 용도

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

TypeScript

// 값 저장 용도(number)
const count = useRef<number>(0);
const text = useRef<string>("")

---

DOM 취득 용도

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

TypeScript

// DOM button 참조: 제네릭으로 html엘리먼트(button) 설정. 초기값은 null로 설정
const buttonRef = useRef<HTMLButtonElement>(null);

// DOM input 참조 : 제네릭으로 html엘리먼트(input) 설정
const inputRef = useRef<HTMLInputElement>(null);

Tip

useRef로 취득하는 DOM은 최초 mount되기 전엔 null이다.

---

useRef - ref객체 타입

useRef로 생성한 ref 객체의 타입은 아래의 2가지로 정의된다.

---

값 저장 용도

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

TypeScript

React.MutableRefObject<number>

---

DOM 취득 용도

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

TypeScript

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

Tip

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

useRef로 만든 ref 객체의 타입을 사용해야 할 경우, 상황에 따라 MutableRefObject와 RefObject를 사용해주면 된다.

---

실제 사용 예제

TypeScript

import React, { useEffect, useRef } from "react";

export default function RefMain2(): JSX.Element {
  const inputRef = useRef() as React.MutableRefObject<HTMLInputElement>;

  useEffect(() => {
    inputRef.current.focus();
  }, []);

  const login = () => {
    alert(`Welcome. ${inputRef.current?.value}!`);
    inputRef.current.value = "";
    inputRef.current.focus();
  };

  return (
    <React.Fragment>
      <input ref={inputRef} type="text" placeholder="username" />
      <button onClick={login}>Login</button>
    </React.Fragment>
  );
}

---

사용법 요약

사용법을 요약하면 다음과 같다.

TypeScript

const localVarRef = useRef<number>(0);

로컬 변수 용도로 useRef를 사용하는 경우, MutableRefObject<T>를 사용해야 하므로 제네릭 타입과 같은 타입의 초기값을 넣어주면 된다.

TypeScript

const inputRef = useRef<HTMLInputElement>(null);

DOM을 직접 조작하기 위해 프로퍼티로 useRef 객체를 사용할 경우, RefObject<T>를 사용해야 하므로 초기값으로 null을 넣어주면 된다.

---

참고 문헌

• 1TypeScript React에서 useRef의 3가지 정의와 각각의 적절한 사용법
• 2[React] MutableRefObject와 LegacyRef
• 3[React] TypeScript useRef 사용법 (+ ref 객체 타입)