아래 코드는 React 문법에 맞게 작성하였으며
JS에서 JS 문법에 맞게 작성하여도 적용 가능합니다.
기본적으로 input[type="file"]은 위와 같이 표시됩니다.
파일이 선택되지 않았을 때 기본 이미지로,
파일이 선택되면 해당 파일의 미리보기로 바꿔보도록 하겠습니다.
이미지 파일만 받도록 accept를 설정해주고
<input>에는 onChange()를, <img>에는 onClick()을 설정하고
<input>은 display: none;을,
<img>는 imgFile에 따른 src 설정을 해줍니다.
<img>의 onClick()을 <input>이 클릭되게 설정합니다.
<input>의 onChange() 설정입니다.
imgFile 변수에 선택된 파일의 미리보기를 담는 코드입니다.
파일 선택을 취소할 경우 reader.readAsDataURL(file);에서 오류가 발생하므로 조건문으로 함수를 종료했습니다.
<img>를 클릭하여 파일 선택이 되며
선택된 파일에 따라 파일 미리보기 | 기본 이미지 로 표시되는 기능이 완성되었습니다.
