Input 태그 value 초기화하기

✔️ 필요성

파일을 업로드하는 Input 태그에서 제출 버튼을 눌렀는데도 해당 파일 이름이 그대로 남아있는 경우가 있다.
제출 버튼을 누르면 파일이름이 초기화(없어지면)되기를 원한다.

✔️ 문제 확인

useRef를 선택해서 reference 객체를 만들어주고 해당 객체를 input 태그의 ref props에 지정한다.
그리고 제출버튼을 눌렀을 때 ref객체를 초기화하는 onClearInput 함수를 호출한다

// Image Input 값을 초기화
const inputImageRef = useRef<any>(null)
const onClearInput = () => {
    inputImageRef.current.value = ''
}
    
    
// feedback 제출버튼을 클릭했을 때
const onClick = async () => {
    try {
        alert('피드백 전송을 성공했습니다.')
    } catch (e) {
        alert('피드백 전송에 실패했습니다.')
    } finally {
        onClearInput()
    }
}

return (
	<>
	<input
			type={'file'}
			accept={'image/*'}
			onChange={handleFileInput}
			ref={inputRef}
		/>
    <button onClick={onClick}/>
    </>
)

✔️ 문제 해결

제출하기 버튼을 눌렀을 때 '선택된 파일 없음'으로 다시 바뀐다