오늘 겪은 삽질은 같은 파일을 올렸을때 파일에 대한 변화가 없는 부분입니다.

바로 예시로 들어가보겠습니다.

문제 발생

프로필을 등록하기 위해 아래와 같은 단계별로 프로필을 추가했습니다.
1. 프로필 등록 페이지 접속
2. react-easy-crop를 활용하여 원하는 이미지 추출
3. 파일 선택

그러나 여기서 똑같은 파일을 클릭하게 되면, 화면 추출하는 모달이 열리지 않는 문제가 발생합니다.

만약 사용자가 같은 파일을 선택하면 브라우저는 이전 값과 동일하다고 판단합니다

그렇다면 같은 파일의 조건이 무엇일까요?

따라서 위 4가지가 같으면 브라우저는 같은 파일로 간주하여, 변화를 인식하지 않게됩니다.

문제 해결

문제 해결은 아주 간단합니다.
input의 value값을 빈문자열로 초기화 해주게 되면 됩니다.

onChange 이벤트를 핸들링 하는곳에서 event.target.value = '' 값으로 초기화 해주게 되면, 문제가 바로 해결됩니다.