react 질문드립니다.

React
1

react를 처음 다뤄봐서 질문이 많네요 ㅠㅠ

위의 Example using React JS를 참고하여 질문드립니다.

function buildFileSelector(){
  const fileSelector = document.createElement('input');
  fileSelector.setAttribute('type', 'file');
  fileSelector.setAttribute('multiple', 'multiple');
  return fileSelector;
}

class FileDialogue extends React.Component {
  componentDidMount(){
    this.fileSelector = buildFileSelector();
  }
  
  handleFileSelect = (e) => {
    e.preventDefault();
    this.fileSelector.click();
    //this.myCall(this.fileSelector.files[0].name);
    //파일 이름을 알아내어 myCall을 호출합니다.
  }

  myCall(url) {
    //url관련 후처리를 하려고 합니다.
  }
  
  render(){
   <button onClick={this.handleFileSelect}>file browser</button>
  }
}

위의 코드를 통해 file browser를 열고 파일을 선택한 후 handleFileSelect함수에서 파일명에 관한 후처리를 하려고 합니다. this.fileSelector.files[0].name을 통해 파일 이름을 접근하려고 할 때 Uncaught TypeError: Cannot read property ‘name’ of undefined 에러가 발생합니다

제가 생각하기에는 클래스 안에 있는 함수들을 다 실행하고 render를 통해 화면을 보여주기 때문에 파일이 선택되기 전에 접근을 해서 생기는 오류같습니다 파일명을 통해 다른 함수를 호출하려고 하는데 도움을 주시면 감사하겠습니다

2

클릭이 되자마자 fileSelector의 file을 접근할 순 없을 것 같아요.
fileSelector의 onChange이벤트를 이용해 보시면 어떨까요?

3

onChange이벤트는 input태그를 이용하여 하는 방법인가요?

this.fileSelector.onchange(alert(“onChange”));
다음과 같은 방법으로 시도했지만 파일 브라우저가 열리고 바로 얼터가 실행됩니다.

4

한번 files[0]?.name 해보실래요?