이미지 업로드 구현

[React] 이미지 업로드 / 미리보기

쇼핑몰 프로젝트를 진행하면서 스타일 공유 커뮤니티 페이지에서 이미지 업로드 / 미리보기를 처음으로 구현해보았다. 이미지 업로드 / 미리보기는 프로필, 게시글 등 다양한 곳에서 사용될 수 있기에 라이브러리도 있지만 직접 구현해보고 공부한 내용을 기록해보려 한다. 1. FileReader Web API로 FileReader는 File, Blob 객체가 저장하고 있는 바이너리 데이터를 '비동기적'으로 읽어주는 객체이다. 기본동작은 read - load Event - result 의 과정을 거친다. FileReader 객체를 생성한 후에 readAsDataURL()은 File 또는 Blob을 읽은 뒤 base64로 인코딩된 문자열을 result 라는 속성에 담는다. onload()는 성공적으로 파일을 읽었을 때..