TypeScript useRef "Object is possibly null" error?

문제 발생

프로젝트에서 TypeScript 환경에서 useRef를 활용할 일이 있었는데, 해당 DOM 객체의 타입을 명시해주었음에도 불구하고 에러가 발생

문제 해결

const linkRef = useRef<HTMLLinkElement>(null); // useRef 지정

if (linkRef.current !== null) { // null 값 체크
  linkRef.current.focus();
}

useRef를 통해 지정을 해주고, null 값을 체크해주면서 해결을 할 수 있다.

const myRef = useRef<HTMLLinkElement>(null); // useRef 지정
myRef.current?.focus(); // ES2020의 optional chain을 통해 다음과 같이 지정도 가능하다.

ES2020의 optional chaing을 통해 위와 같은 코드로도 지정이 가능하다.