리액트 심화주차 개인과제 4일차

프로필 UI를 구현하면서 이미지를 업로드하고, 이미지를 업로드하면 업로드한 이미지가 미리보기에 나오도록 구현하면서 알게된 점을 남겨보려고 한다.

원래 input의 default타입은 text지만 이 타입을 file로 변경해주면 컴퓨터에 있는 파일을 선택해서 업로드할 수 있다.

<input type="file"/>

그런데 파일선택이라는 버튼이 마음에 들지 않아 label태그를 활용하여 input태그를 숨기고 label에 스타일을 주었다.
input태그는 label태그와 함께 쓰여 input에 대한 보충설명을 해준다. label의 for 속성과 input의 id속성에 같은 값을 입력해 두 태그를 연결했다. JSX에서는 label의 for을 htmlFor로 작성해주어야 한다.

=> input태그의 accept속성은 서버로 업로드할 수 있는 파일의 타입을 명시하고, 이 속성은 input의 type이 file인 경우에만 사용가능하다. image/*은 모든 타입의 이미지 파일이 허용됨을 의미한다.

• 이미지 미리보기!!
  
  
  => 이미지 미리보기 구현을 위해 FileReader API를 사용했다. FileReader는 웹 API이다. 웹 API란 개발자가 브라우저 상에 쉽게 개발할 수 있도록 도와주는 객체들의 모음이다. 이 FileReader도 객체의 형태이기 때문에 new FileReader()로 파일리더를 만들어준 뒤 사용할 수 있다.
  => readAsDataURL을 통해 파일을 URL로 만들 수 있고, 파일 정보를 주소처럼 사용할 수 있게 된다.