React(Next.js) 에서 이미지 입력받기

📍개요

1. 이미지 경로 문자열을 상태로 관리하기

2. input element 로 이미지 입력받을 때 주의할 점

3. 입력받은 이미지 미리보기 기능

 

📍코드

✅이미지 경로 문자열을 저장할 상태를 만든다 => imgSrc

 

✅input element에서 type="file", accept="image/*" 로 설정하면, 파일 중에서 이미지 파일만 입력받게 설정할 수 있다

 

// test.tsx
import { useState } from "react";
import Image from "next/image";

export default function TestPage() {
  const [imgSrc, setImgSrc] = useState<string>( // /public 내의 기본 이미지 경로
    "/images/default-image.png",
  );

  return (
    <div>
      <h2>여기는 input 으로 image 입력받는 부분</h2>
      <input type="file" accept="image/*" />
      <Image src={imgSrc} alt="" width={200} height={150} priority />
    </div>
  );
}

 

✅handleChange onChange 이벤트 핸들러를 만들어, input 값이 변경되면, 그 변경 내용을 추적하여 setState 함수를 작동시켜 입력된 이미지의 경로를 받아들일 것이다

 

✅JavaScript 의 FileReader API를 이용한다

 

📍완성된 코드

import { useEffect, useState } from "react";
import Image from "next/image";

export default function TestPage() {
  const [imgSrc, setImgSrc] = useState<string>(
    "/images/default-image.png",
  );

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    // 옵셔널 체이닝
    // e.target.files가 있으면 우항 실행
    // 없으면 undefined
    const file = e.target.files?.[0];
    if (!file) return;
    const fileReader = new FileReader();
    fileReader.readAsDataURL(file);
    // 로딩이 완료되면 실행할 콜백 함수 등록
    fileReader.onload = (e) => {
      if (typeof e.target?.result === "string") {
        setImgSrc(e.target?.result);
      }
    };
  };

  useEffect(() => {
    console.log(imgSrc); // imgSrc 에는 엄청 긴 문자열이 경로로 등록됨
  }, [imgSrc]);

  return (
    <div>
      <h2>여기는 input 으로 image 입력받는 부분</h2>
      <input type="file" accept="image/*" onChange={handleChange} />
      <Image src={imgSrc} alt="" width={200} height={150} priority />
    </div>
  );
}

 

📍참고

https://developer.mozilla.org/ko/docs/Web/API/FileReader

FileReader - Web API | MDN