[컴포넌트] 이미지/파일 유효성 검사

이미지유효성 검사

const handleChange = useCallback((event) => {
	var fileReg = /(.*?)\.(jpg|jpeg|png|gif|bmp|pdf) // 이미지 정규식
    const reader = new FileReader()
    const file = event.target.files[0]

    if (!fileReg.test(file.name)) {
      return message.error('이미지 파일만 올려주세요.')
    }
},[])

<input 
  type="file" 
  name="imgFile" 
  id="imgFile" 
  onChange={handleChange} 
  accept="image/*" />

파일 유효성 검사

<Input
  id="file"
  type="file"
  onChange={handleChange}
  accept="application/*" />

🤓 느낀점

유효성 검사 뿐만 아니라 accept를 통해서 제한할수 있다는점을 처음 알게 되었다.
js로만 유효성을 체크하기 보다는 html에서 제공하는 옵션들을 통해서 
손쉽고 깔끔하고 사용자편의에도 좋게 코드를 써야겠다.