[Trouble Shootings #10] React - 파일 업로드 로직 구현 시 발생 가능한 이슈

리액트에서 사진/파일 업로드 로직 구현 시 다양한 방식이 있습니다.

 

그 중 대표적으로 input type="file" 태그를 display:none; 처리하고

 

ref를 만들어 속성으로 추가한 뒤 업로드 버튼에 연동하는 방법이 있습니다.

 

이 때 input type="file" 태그에 onChange 이벤트를 추가하여

 

작업을 처리했지만 발생할 수 있는 이슈가 하나 있습니다.

 

사진/파일 업로드하고 해제 후 다시 동일한 사진/파일 업로드 했을 때 아무 작동도 하지 않는 경우가 있습니다.

 

input onchange 이벤트 발생 후 input value 관련 ref.current.value 빈 문자열로 초기화하면

 

해당 이슈는 해결됩니다.