[JS] FileReader

다음 코드는 이미지를 읽고

데이터를 URL로 변환하는 코드입니다.

자세히 살펴봅시다.

const [newProductImage, setNewProductImage] = useState(null);

const handleImageChange = (e) => {

        const file = e.target.files[0];

        if (file) {

            const reader = new FileReader();

            reader.onloadend = () => {

                setNewProductImage(reader.result);

            };

            reader.readAsDataURL(file);

        }

    };

 

const handleImageChange = (e) => {

 

e가 파라미터로 들어갔는데

이것은 위 함수가 이벤트 핸들러 함수라는 것을 의미합니다.

 

 const file = e.target.files[0];

 

file이라는 변수를 만들어서

이벤트가 발생된 파일들의 배열을 file에 넣습니다.

e.target은 파일 입력 요소 <input type="file" />를 참조합니다.

이때 e.target.fiiles[0]은 첫번째 입력된 파일을 의미합니다.

 

const reader = new FileReader();

 

FileReader라는 객체를 하나 생성하는데

FileReader는 브라우저에서 파일 내용을 읽는 데 사용되는 API입니다.

파일을 읽어서 텍스트, 데이터 URL(Base64), 버퍼 등의 형식으로 변환할 수 있습니다.

 

 reader.onloadend = () => {

                setNewProductImage(reader.result);

            };

 

reader의 onloadend 함수는 파일 읽기가 끝난 후 실행됩니다.

reader.result는 읽어들인 파일 데이터이며, 이 코드는 Base64로 인코딩된 이미지 데이터를 반환합니다.

 

(예: <img src={newProductImage} />처럼 렌더링에 사용)

읽어들인 파일 데이터를 새로운 이미지로 지정합니다.

 

   reader.readAsDataURL(file);

 

마지막으로 readAsDataUrl코드는 Base64로 인코딩된 데이터 URL 형식으로 읽습니다.

이 데이터 URL은 <img src="data:image/png;base64,...">처럼 이미지를 렌더링할 때 사용됩니다.

 

데이터 URL이란?

데이터 URL은 파일을 텍스트(Base64)로 변환한 문자열입니다. 이 문자열은 이미지, 오디오, 비디오, PDF와 같은 파일 내

용을 포함할 수 있으며, 브라우저에서 해당 파일을 직접 렌더링할 수 있습니다.