React - 파일 데이터 전송하기(파일 업로드, 파일 미리보기)

리액트에서 파일 업로드를 하는 방법은 기존 ajax를 사용하는 방법과 크게 다르지 않다. 스테이트에 파일 데이터를 넣는 방법이 다른 부분이 있어서 해당 부분부터 처리를 해야한다. 먼저 아래와 같이 두개의 스테이트를 생성한다. const [imgBase64, setImgBase64] = useState([]); // 파일 base64 const [imgFile, setImgFile] = useState(null);//파일 imgFile은 이미지 파일 그 자체를 받을 스테이트이고, imgBase64는 미리보기를 구현하기 위해서 이미지 데이터를 받을 스테이트이다. 아래와 같이 input을 만들어준다. 위 input에 파일을 등록하면 handleChangeFile 함수가 실행한다. const handleChan..

2021.05.27