미리보기

리액트에서 이미지 미리보기 만들어보기 (React Image Preview)

서론 HTML의 input 태그로 이미지를 핸들링할 때 현재 선택한 이미지를 미리 보고 싶은 경우가 있다. 라이브러리를 통해 구현할 수도 있지만 어떤 방식으로 구현할 수 있을까 고민해보았다. Web API 중 FileReader라는 객체를 사용하여 구현해보도록 하겠다. React에서 ImagePreview 만들기 마크업은 위와 같다. 동작원리는 다음과 같이 설계했다. input 이미지가 변경될 때 onChange 함수 내부에서 파일을 체크한다. 위의 File 객체를 기반으로 이미지를 base64로 인코딩한다. 인코딩된 문자열을 imageSrc state에 넣음으로 렌더링 하여 프리뷰를 보여준다. 즉, input에서 사용자가 입력한 File 객체를 base64로 인코딩할 필요가 있다. 이를 위해서 File..