문제 상황

useRef로 컴포넌트 하나를 ref로 참조하고, 그 컴포넌트의 style을 조정하려고 current를 사용하는 순간...! 붉은 줄이 쳐진다...(IDE는 VSC)
도저히 무슨 에러인지 알 수가 없는데, 해결책을 찾아보자.

필자는 아래와 같은 코드를 작성했었다.

const slideRef = useRef<HTMLDivElement>(null);

div 태그에 ref를 달아놨기 때문에 타입을 HTMLDivElement로 설정했다.
그리고, 이 ref를 활용해서 컴포넌트의 스타일을 바꾸려고 다음과 같은 코드를 작성했다.

slideRef.current.style.transition = "";

그런데...slideRef.current에 "개체가 null인 것 같습니다"라는 에러가 계속해서 발생했다.

이유

에러 메세지에 이유가 나와있다...slideRef.current가 null이기 때문에 발생하는 것이다.
useRef를 선언할 때, 초기값으로 null을 준 것이 그 원인이다.
useRef는 그저 초기값을 current에 저장할 뿐이다.
따라서, slideRef.current를 사용하면 null이 나올 수 밖에..ㅠㅠ

적용

방법 1

기존에 설정해놨던 타입인 HTMLDivElement를 지우고 any 타입을 설정해줬다.

const slideRef = useRef<any>(null);

이러면 에러가 해결된다!

방법 2

useRef쪽은 그대로 놔두고 current를 사용하는 곳을 건드리는 방법도 있다.

if (slideRef.current) {
  slideRef.current.style.transition = "";
}

이러면 에러가 해결된다!

결론

useRef는 그저 초기값을 current에 담기만 할 뿐이라는 것도 잊지말자!
또한, useRef와 Typescript가 같이 사용될 때, 정확한 동작 원리를 이해할 필요가 있다.
이 부분에 대해서는 따로 정리를 해야겠다.

참고 자료

참고 자료 1
참고 자료 2