24.01.22

오늘 할 일

• 파일 요구사항 읽어보기 (완료)
• 초기 세팅 (완료)
• UI 간단하게 구현

배운점

• input의 webkitdirectory 속성을 사용하여 폴더를 업로드 할 수 있다.

  • 근데 react에서 사용하려고하면 에러 발생.

  • useEffect와 ref, setAttribute를 이용해서 해당 문제를 해결하면 된다.

    useEffect(() => {
        if (inputRef.current) {
          inputRef.current.setAttribute('webkitdirectory', 'true');
        }
      });

• FileList 타입은 배열이 아니다. iterator이다. 그렇기에 fileList.map is not a function이라는 에러가 발생하는 것이다. ⇒ e.target.files를 저장할 때 배열로 변경해준다.

	const handleUploadFile = (e: ChangeEvent<HTMLInputElement>) => {
    const files = e.target.files;
    if (!files || files?.length === 0) {
      return;
    }
    setFileList(Array.from(files));
  };