useRef<HTMLElement>(null)과 useRef<HTMLElement | null>(null)의 차이점

정리하게 된 계기

useRef로 돔을 참조(ref)하게 될때, 습관상 <>안에 null을 넣는게 맞는가 아닌가 잠시 고민한 적이 몇 있었다

차이점이 무엇인지 궁금했고, 나중에 빠르게다시 읽을 목적으로 정리했다.

읽기 전

타입<>안에 HTMLElement부분은 필요한 돔 타입명으로 대체해 읽으면 될 것 같다.

컨텐츠 내용

다음의 수식 의미를 정리한다.

useRef<HTMLElement>(null)

useRef<HTMLElement | null>(null)

결론

타입에 null을 넣게 되면/null을 넣는단 의미는, 값이 null 일 수 있다는 의미이고, 컴파일러가 에러를 뱉지 않도록 null 체크를 해야한다는 의미다. 즉,돔을 참조하는 경우, null을 넣지 말자

useRef<HTMLInputElement>(null)은 해당 ref가 참조하는 대상이 항상 HTMLInputElement 객체임을 보장한다.

useRef<HTMLInputElement | null>(null)은 해당 ref가 참조하는 대상이 HTMLInputElement 객체이거나 null일 수 있다.

---

1.

useRef<HTMLInputElement>(null)

원하는 타입(예:HTMLInputElement)에 대한 참조ref를 만드는 보통의 돔을 참조하는 수식이다.

수식내용은 다음과 같다

해당 타입의 객체를 가리키는 ref를 생성하고, 이 객체는 null로 초기화 한다.

즉, 해당 사용자가 정의한 ref(: 자신이 useRef로 만든 변수)가 참조하는 대상은 "null이 아닌", HTMLInputElement 객체(혹은 어떤 HTMLElement)여야 한다는 의미다.

참조 할 돔의 타입(예: HTMLInputElement, HTMLSelectElement)을 지정함으로써, 참조 할 타입이 무엇이다 라고 명시해야한다.

따라서 해당 ref를 이용하여, 해당 참조한 HTMLElement 객체의 프로퍼티나 메소드를 사용할 때, 타입스크립트 컴파일러는 이 객체가 항상 null이 아님을 보장한다.

결론적으로 참조하는 돔의 타입을 지정해야, 해당 요소의 속성 및 메서드를 사용할 수 있고, 타입 안정성을 보장할 수 있다.

2.

useRef<HTMLInputElement | null>(null)

useRef로 생성한 참조값은 해당 HTMLElement 타입의 객체 "또는 null을 가리키는(값을 가지는)" ref를 생성하며, null 값을 가집니다.

수식내용은 다음과 같다

해당 ref가 참조하는 대상은 HTMLInputElement 객체거나 "null일 수" 있습니다. (그 무시무시한 "해당 값은 null 일 수 있습니다" 라는;;;;)

따라서 해당 ref를 이용하여 HTMLElement 객체의 프로퍼티나 메소드를 참조할 때, 이 객체의 값이 null일 가능성도 고려해야 합니다.

그러므로 반드시 null 체크를 수행해야 합니다.