1. 문제 현상

---

• 프로필 이미지를 클릭하면 input 이벤트가 실행되게 하기 위해 useRef를 사용하여 프로필 이미지에 이벤트를 걸어주었는데 이벤트에서 에러가 발생하였다.

<ProfileImg src={image} alt='프로필 이미지' onClick={clickProfile} />
<ImgInput type='file' accept='image/*' onChange={saveImage} ref={fileInput} />

2. 문제 원인

---

• useRef를 사용하면 파라미터로 들어온 초기값으로 초기화된 레퍼런스 객체를 반환한다. 만약 초기값이 null이라면 .current의 값이 null({ current: null })인 레퍼런스 객체가 반환된다.

• 그런데 current를 읽어올 때 null 체크를 해주지 않았다.

3. 문제 해결

---

• 옵셔널 체이닝 연산자 ?.를 사용하여 문제를 해결 할 수 있었다.

  const clickProfile = () => {
    fileInput.current?.click();
  };

참고

• [TS]useRef 자세히 알아보기