React 파일 입력을 같은 파일로 다시 선택할 수 없었던 문제 해결 기록

증상이 생각보다 단순하지 않았다

이미지를 고른 뒤 미리보기에서 삭제하고, 방금 지운 파일을 다시 선택하는 흐름을 만들었다. 첫 번째 선택은 정상인데 같은 파일을 두 번째로 고르면 onChange가 호출되지 않았다. 네트워크 탭에는 두 번째 요청 자체가 없어서 서버 문제도 아니었다.

브라우저의 선택 기록을 초기화했다

input[type=file]은 React state만 바꾼다고 초기 상태가 되지 않는다. 브라우저가 같은 파일을 다시 고른 것을 값의 변화로 보지 않을 수 있기 때문이다. 삭제 버튼에서 input의 value도 비웠다.

const inputRef = useRef<HTMLInputElement>(null)

function removeFile() {
  setFile(null)
  setPreviewUrl(null)
  if (inputRef.current) inputRef.current.value = ''
}

<input ref={inputRef} type="file" accept="image/*"
  onChange={(event) => setFile(event.target.files?.[0] ?? null)} />

처음에는 key를 바꿔 input을 통째로 다시 만들었다. 포커스가 튀고 테스트가 복잡해져 삭제 동작에서 명시적으로 초기화하는 쪽으로 정했다.

수정 후 확인한 경우

• 다른 파일과 같은 파일을 삭제 직후 다시 선택하는가
• 취소 버튼이 기존 상태를 예상대로 유지하는가
• 업로드 실패 후에도 input을 재사용할 수 있는가
• 모바일 브라우저에서 선택 뒤 포커스가 자연스러운가

마무리

파일 input은 컴포넌트 state만 보면 절반만 보인다. 이번에는 서버를 고치기보다 브라우저 input의 현재 값을 확인해서 작은 수정으로 흐름을 끝냈다.