[React] 파일 입력 박스

다른 폼 요소와 달리 파일 입력 박스는 앱에서 값을 설정하지 않는다(사용자가 지정한 값을 앱이 받을 뿐, 앱이 특정 파일을 지정할 수 없다). 따라서 파일 입력 박스는 항상 비제어 컴포넌트로 구현된다.

다음은 선택한 파일 정보를 로그에 출력하는 예시다.

export default function FormFile() {
  // 파일 입력창에 대한 참조
  const file = useRef(null);

  // [보내기] 버튼 클릭 후 파일 정보 로그 출력
  function show() {
    const fs = file.current.files;
    // 획득한 파일군을 순서대로 스캔
    for (const f of fs) {
      console.log(`파일명: ${f.name}`);
      console.log(`종류: ${f.type}`);
      console.log(`크기: ${Math.trunc(f.size / 1024)}KB`);
    }
  }

  return (
    <form>
      <input type='file' ref={file} multiple />
      <button type='button' onClick={show}>
        보내기
      </button>
    </form>
  );
}

비제어 컴포넌트에서는 대상 요소에 대한 참조를 설정했다. 생성된 Ref 객체에서 current 프로퍼티로 원하는 요소를 얻을 수 있으므로 여기서는 해당 files 프로퍼티로 지정된 파일군을 가져온다.

이제 파일군을 for~of 루프로 스캔하여 개별 파일을 검색할 수 있다. 다음 표와 같은 프로퍼티로 정보를 가져온다.

프로퍼티 개요

name	파일명
type	콘텐츠 유형
size	파일 크기(바이트)
lastModified	최종 업데이트 일시