TIL-23.06.10

 

문제점

<input type='file' /> 형식으로 입력받은 이미지파일을 <img src='' />에 렌더링시키는 방법

이미지를 url형태로 입력받은것이 아니라 파일로 입력받은것이기 때문에, 이걸 이미지 태그의 src로 입력하기 위해서 데이터 url형식으로 바꿀 필요가 생겼다.

 

 

 

시도한점

const [selectedFile, setSelectedFile] = useState(null); //이미지파일 state
const [previewImage, setPreviewImage] = useState(null); //이미지파일의 데이터URL형식 state

  const handleFileChange = event => {
    const file = event.target.files[0];
    setSelectedFile(file);
    if (file) {
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => {
        setPreviewImage(reader.result);
      };
    }
  };
  
  
   <img src={previewImage} alt="preview" />

FileReader 객체는 파일을 비동기적으로 읽을 수 있는 기능를 제공한다. 그래서 reader.onload 를 사용해서 파일 읽기가 완료되었을때 실행할 코드를 작성할수있다.

FileReader로 객체를 생성한 후에, readAsDataURL 메서드를 호출하여 선택된 파일을 읽고, 그 결과를 데이터 URL형식으로 변환한다.

파일읽기가 완료되었을때, .onload 메소드 내부의 코드인 setPreviewImage(reader.result)로 해당 이미지파일의 데이터 URL을 state로 관리한다.

해당 state를 img태그의 src에 입력해주면 정상적으로 이미지를 렌더링할수있다.

 

 

 

 

알게된점

파일을 읽는 객체인 FileReader는 비동기적으로 파일을 읽을 수 있는 기능을 제공한다는점.