[react & typescript] useRef 사용시 "개체가 null(undefined)인 것 같습니다" 에러 해결하기

프로필 이미지 변경 관련 로직을 구현하던 중 만난 에러였다.

  // 프로필 이미지 수정을 위한 ref
  const fileInput = useRef<HTMLInputElement>(null);

프로필 이미지 변경 기능 구현을 위해 useRef를 사용하여 파일 업로드를 위한 <input> 태그를 가리키거나, 

프로필 이미지 클릭 시 프로필 이미지를 가리킬 수 있도록 만들고 있던 찰나

// 프로필 이미지 클릭시 파일 업로더 뜸
  const onClickImg = () => {
     fileInput.current.click();
  };

위의 코드에서 '개체가 null인 것 같다는 에러가 뜨고 말았다ㅠㅠ 타입스크립트 너 진짜 깐깐하다!!!

구글링을 해보니, useRef를 선언할 때, 초기값으로 null을 준 것이 원인이였다.  useRef는 초기값을 current에 저장하기 때문에 사용하려고 할 때 null인 것 같다는 에러가 뜬 것이였다.

 

해결 방법은 두 가지가 있었다.

1. useRef의 type을 any로 한다.
2. useRef의 타입은 그대로 놔두고 current를 사용하는 곳을 수정해준다.

 

type을 any로 두는 것은 최대한 지양하고 싶었기에 2번을 선택하여 적용해보았다.

// 프로필 이미지 클릭시 파일 업로더 뜸
  const onClickImg = () => {
    if (fileInput.current) {
      fileInput.current.click();
    }
  };

성공!

아직도 type 지정은 너무 어렵다..ㅠㅠ

 

참고한 블로그

https://velog.io/@rkio/Typescript-React-useRef-%EC%82%AC%EC%9A%A9%EC%8B%9C-%EA%B0%9C%EC%B2%B4%EA%B0%80-nullundefined%EC%9D%B8-%EA%B2%83-%EA%B0%99%EC%8A%B5%EB%8B%88%EB%8B%A4-%EC%97%90%EB%9F%AC

[Typescript] React - useRef 사용시 "개체가 null(undefined)인 것 같습니다" 에러