[React-Dropzone] TypeScript 사용시 acceptedFiles 에서 발생하는 오류 관련 및 해결

패스트캠퍼스에서 이미지 갤러리 서비스를 연습하던 중 이미지 파일을 브라우저에 드롭할 수 있게 도와주는 react-dropzone에 대해 알아봤다.

신기하게 이번 시간에선 리액트를 타입스크립트로 만졌고 React-dropzone에서 다음 부분에 문제가 생겼다.

const onDrop = useCallback((acceptedFiles) => {
    // Do something with the files
  }, [])

파일이 브라우저에 드롭됐을 때 그 파일을 처리하는 부분이다.

이 부분의 acceptedFiles 부분에 문제가 생겼다

acceptedFiles가 'any'타입으로 명시되어 오류가 난다는 뜻이다.

해결책은 간단했다.

타입 스크립트이기 때문에 acceptedFiles의 타입을 명시하면 된다.

이 값은 File배열을 가지기 때문에 File[]타입을 명시하면 된다!

const onDrop = useCallback((acceptedFiles:File[]) => {
    // Do something with the files
  }, [])

이러면 오류없이 잘 작동되는 걸 알 수 있다.

 

한참 찾았네..