업로드 성공 후 입력 필드를 재설정하는 데 React의 useRef Hook이 도움이 되는 방법

React를 사용하면 일부 입력 필드를 다른 입력 필드보다 재설정하는 것이 더 어색할 수 있습니다. 특히 파일 입력은 문제가 될 수 있지만, 파일 업로드에 성공한 후 재설정하고 싶은 정확한 필드입니다.

다행히도 useRef 훅은 간단한 해결책을 제공합니다. 업로드 성공 후 사용Ref 훅을 사용하여 파일 입력 필드를 지우는 방법을 알아보세요.

간단한 업로드 양식 만들기

useRef로 파일 입력 필드를 재설정하는 방법을 보여드리기 위해 이미지를 허용하는 입력 필드가 있는 간단한 React 폼을 만들어 보겠습니다.

먼저, 선택한 파일을 추적하기 위해 useState 훅을 사용하여 selectedFile이라는 상태 값을 설정합니다. 사용자가 아직 파일을 선택하지 않았으므로 selectedFile의 초기 상태는 null이 됩니다.

또한 사용자가 파일을 선택할 때 selectedFile 상태를 업데이트하는 handleFileChange라는 핸들러 함수를 만듭니다. 사용자가 파일을 업로드할 때 상태를 업로드해야 하는 handleSubmit이라는 두 번째 함수를 추가합니다.

 import { useState } from "react";

function FileUploadForm() {
  const [selectedFile, setSelectedFile] = useState(null);

  const handleFileChange = (event) => {
    setSelectedFile(event.target.files[0]);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
  };

  return (
    <>
      <form onSubmit={handleSubmit}>
        <label htmlFor="fileInput">Choose a file:</label>
        <input type="file" id="fileInput" onChange={handleFileChange} />
        <button type="submit">Upload</button>
      </form>
    </>
  );
}
 

파일 업로드가 완료되면 애플리케이션은 입력 필드를 지워야 하며, 그 방법은 아래에서 배우게 됩니다.

파일 업로드 후 입력 필드 지우기

텍스트 필드인 경우 상태를 빈 문자열로 설정하여 입력을 지울 수 있습니다:

 setSelectedFile("")
 

하지만 파일 형식의 입력 필드에서는 작동하지 않습니다. selectedField 상태 변수를 빈 문자열로 설정하면 상태에서는 파일 데이터만 제거되고 DOM에서는 제거되지 않습니다. 이 상태는 입력 값을 참조하지 않기 때문입니다.

입력 값을 지우려면 useRef 훅을 사용하여 파일 입력에 대한 참조를 만들어야 합니다. 이 예제에서는 React에서 useRef를 임포트하고 fileRef라는 참조 객체를 생성합니다.

 import { useState, useRef } from "react";

function FileUploadForm() {
  // ...
  const fileRef = useRef()

  return (
    // ...
  );
}
 

그런 다음 아래와 같이 입력 필드에서 참조를 참조합니다.

 <form onSubmit={handleSubmit}>
    <label htmlFor="fileInput">Choose a file:</label>

    <input
        type="file"
        id="fileInput"
        onChange={handleFileChange}
        ref={fileRef}
    />

    <button type="submit">Upload</button>
</form>
 

React는 ref 변수의 현재 속성을 DOM 요소로 설정하므로 다음과 같이 파일 값을 얻을 수 있습니다:

 fileRef.current.value
 

그런 다음 이 값에 null을 할당하여 재설정할 수 있습니다.

 fileRef.current.value = null
 

이 값을 다음과 같이 handleReset이라는 함수에 캡슐화합니다:

 const handleReset = () => {
    fileRef.current.value = null;
};
 

그런 다음 파일을 성공적으로 업로드할 때 이 함수를 호출하여 입력 필드를 지웁니다.

파일 업로드 후 입력 필드를 재설정해야 하는 이유

일반적으로 파일 업로드에 성공한 후에는 입력 필드를 재설정하는 것이 좋습니다. 이는 사용자에게 업로드가 성공했음을 명확하게 표시하고 입력 필드를 수동으로 지우지 않고도 다른 파일을 업로드할 수 있는 기회를 제공하기 때문입니다.