오늘은 이미지 미리보기를 구현해보기로 했다!
처음 구현해보는 기능이어서 구글링을 열심히 했다 ..ㅎㅎ

매개변수와 인자의 관계

이미지 미리보기 기능 구현

Web API 중 FileReader라는 객체를 사용하여 구현해야 한다.

동작원리는 다음과 같다.

• input 이미지가 변경될 때 onChange 함수 내부에서 파일을 체크한다.
• 위의 File 객체를 기반으로 이미지를 base64로 인코딩한다.
• 인코딩된 문자열을 imageSrc state에 넣음으로 렌더링 하여 프리뷰를 보여준다.

즉, input에서 사용자가 입력한 File 객체를 base64로 인코딩할 필요가 있다.
이를 위해서 FileReader라는 Web API를 사용한다.

FileReader는 기본적으로 EventTarget을 상속받았기에 이벤트리스너를 부착해줄 수 있다.

readAsDataURL은 File 혹은 Blob 을 읽은 뒤 base64로 인코딩한 문자열을 FileReader 인스턴스의 result라는 속성에 담아준다.

input의 onChange에 위의 함수를 넣어줄 것이다.

• FileReader의 인스턴스 reader을 생성한다.
• 인자로 받은 fileBlob을 base64로 인코딩한다.
• reader가 인코딩을 성공했다면 reader.result 안에 담긴 문자열을 imageSrc로 세팅해준다.
• resolve를 호출하여 Promise를 이행상태로 만들어준다.

여기서 내가 부족했던 부분이 나온다 !!

나는 아직 매개변수와 인자의 관계를 이해하지 못했던 것 같다 ..

   onChange={(e) => {
                        previewImage(e.target.files[0])
                      }}

여기서 previewImage() 괄호 안에 들어가는 것이 previewImage 로 인자를 보내주는 것이다.

그렇기 때문에 previewImage 가 받은 'e'는 event가 아니라 e.target.files[0], 즉 file을 받은 것이다.

그럼 사진의 reader.readAsDataURL(e.target.files[0]) 는 e.target.files[0].target.files[0] 가 되어버린다.

이를 제대로 적용시키기 위해서는 두 가지 방법이 있다.

onchange에서 previewImage(e.target.files[0]) 를 줬으니
이미지 미리보기 기능 구현시 'e'만 주거나
onchange를 바꾸거나!

정리해보겠다.

---

  // 이미지 미리보기
  const previewImage = (e) => {
    const reader = new FileReader(); // 이미지 미리보기
    reader.readAsDataURL(e);
    reader.onload = () => {
      setImageSrc(reader.result);
    };
  }
  
  
   <
	 onChange={previewImage}
    />

  // 이미지 미리보기
  const previewImage = (e) => {
    const reader = new FileReader(); // 이미지 미리보기
    reader.readAsDataURL(e.target.files[0]);
    reader.onload = () => {
      setImageSrc(reader.result);
    };
  }
  
  
   <
	onChange={previewImage}
    />

---

기본기를 익힐 때는 분명히 알고 짚고 넘어간 것인데
이렇게 응용할 때에는 약한 것 같다ㅠㅠ 이번 기회에 다시 정리해보겠다.