TIL 이미지 업로드 미리보기

DOC 사용

const onChange = (e) => {

    // input type file 비동기적으로 파일의 내용을 읽어들이는 데 사용됨
    const reader = new FileReader()

    // 현재 input 의 files 정보를 onChange 함수와 useRef를 통해 읽어옴
    const file = imgRef.current.files[0]

    // 바이너리 파일을 base64 encode 문자열로 반환
    // 그 외 readAsText() 텍스트로 읽기
    reader.readAsDataURL(file)

    // reader의 이벤트 핸들러 중 하나
    // onloaded 읽기 동작이 성공여부를 떠나 완료되었을 때 발생
    //  읽어온 결과를 result로 반환 받음
    reader.onloadend = () => {
      dispatch(imgActions.preview(reader.result))
    }
  }

https://developer.mozilla.org/ko/docs/Web/API/FileReader

FileReader - Web API | MDN

 

reader.onloaded 읽기 동작 성공여부를 떠나 완료 되었을 때 

dispatch 를 통해 preview 미리보기로 읽어온 결과물을(result)를 보냄

 

액션함수에서 결과물(result)를 받아서 state에 넘겨준다.

 

넘겨준 값은 컴포넌트에서 다시 useSelector를 통해서 가져와서 출력 함.