useRef: Object is possibly 'null'

command를 누른채로 클릭, node_modules/@types/react/index.d.ts를 살펴보자.

1. MutableRefObject

일반적으로는 MutableRefObject를 반환한다. 매개변수가 제네릭과 일치한다.

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

MutableObject는 또 뭘까? 다시 클릭해서 들어가보자.

interface MutableRefObject<T> {
    current: T;
}

제네릭으로 넘겨준 타입의 current 프로퍼티를 가진 객체이다.

2. null & RefObject

초기값이 null이 될 수 있는 유니언 타입을 지정하면 RefObject를 반환한다.

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

RefObject는 다음과 같이 ref의 current값을 읽기 전용 속성으로 지정한다.

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

따라서 이렇게 타입을 지정하면 current에 내용을 주입하거나 업데이트 할 수 없다. current가 readonly 속성을 포함하고 있기 때문이다.
값이 바뀌어도 화면이 리렌더링되지 않게 하기 위해서 사용할 수도 있다.

3. undefined & MutableRefObject

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

제네릭에 undefined를 넣는 경우에 사용된다.

옵셔널 체이닝

ref.current값이 있을 때 로직을 처리할 수 있도록 옵셔널 체이닝을 추가해준다.

function useClickAway() {
  const [isOpened, setIsOpened] = useState(false);
  const ref = useRef<HTMLElement>(null)

  function handleClickAway(e: MouseEvent): void {
    const target = e.target as HTMLElement;
    if(!ref.current?.contains(target)) setIsOpened(false)
  }

Reference

• https://www.designcise.com/web/tutorial/how-to-fix-object-is-possibly-null-typescript-error-when-using-useref-react-hook