[react & typeScript]'개체가 null인 것 같습니다' 에러 해결하기

프로필 이미지 변경 기능을 만들던 중 이미지 업로드 핸들러 내 event 객체에 'e.target.files는 null일 수도 있습니다'라는 오류 메세지가 떴다.

  // image uploader
  const onChangeImage = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const formData = new FormData();
    formData.append("multipartFiles", e.target.files[0]);
    const response = await axios.post("서버 배포 url/endpoint", formData, {
      headers: {
        "Content-Type": "multipart/form-data",
      },
    });
    // response 형태에 맞추어 변경
    setImage(response.data.path);
    // setImage(response.data.url);
  };

이는 tsconfig.json 에서 다음과 같이 설정된 경우,

{
  "compilerOptions": {
  	"stric": true
  }
}

null 과 undefined 문제를 엄격하게 관리하기에 발생하는 문제임을 발견했다.

따라서 해당 문제를 해결하기 위해 tsconfig.json 파일에 해당 항목을 추가하였다.

{
  "compilerOptions": {
    "strict": true, 
    "strictNullChecks": false
  }
}

성공! 

 

참고한 블로그

https://velog.io/@heony/typescript-null-undefined-error

typescript 개체가 null, undefined 인 것 같습니다?