React) input type file에서 같은 파일 선택에도 onChange 작동시키기

React에서 input 태그에서 같은 파일을 선택했을 때 onChange 이벤트 핸들러가 호출되지 않는 문제는 기본적으로 브라우저에서 발생하는 이슈입니다.

그러나 React에서도 이 문제를 해결할 수 있는 방법이 있습니다. 이를 위해서는 input 태그의 key 속성을 변경해주는 것입니다. key 속성은 컴포넌트의 렌더링을 제어하는 속성으로, 이를 변경하면 컴포넌트를 다시 렌더링할 수 있습니다.

따라서, 같은 파일을 선택하더라도 key 속성을 변경하여 컴포넌트를 다시 렌더링하도록 만들어주면 onChange 이벤트 핸들러가 호출될 수 있습니다.

import React, { useState } from 'react';

function FileUploader() {
  const [selectedFile, setSelectedFile] = useState(null);
  const [key, setKey] = useState(Date.now()); // key 속성을 위한 state

  const handleFileSelect = (e) => {
    const file = e.target.files[0];
    setSelectedFile(file);
    // 파일이 선택되었을 때 처리할 코드
  };

  const handleReset = () => {
    setSelectedFile(null);
    setKey(Date.now()); // key 속성 변경
  };

  return (
    <div>
      <input type="file" key={key} onChange={handleFileSelect} />
      {selectedFile && (
        <div>
          <p>{selectedFile.name}</p>
          <button onClick={handleReset}>Reset</button>
        </div>
      )}
    </div>
  );
}

 

위의 코드에서는 input 태그의 key 속성을 Date.now()를 사용하여 동적으로 생성하도록 하였습니다. 파일이 선택되면 selectedFile 상태를 업데이트하고, 선택된 파일의 이름을 보여주는 UI가 나타납니다. Reset 버튼을 누르면 selectedFile 상태를 초기화하고 key 속성을 변경하여 다시 렌더링하도록 합니다.

이렇게 하면 같은 파일을 선택해도 onChange 이벤트 핸들러가 호출되어 파일 선택 여부를 감지할 수 있습니다.