개요

프로젝트를 진행하던 중 이미지 미리보기 기능이 필요했고, 이를 기억하기위해 이 글을 작성한다.

이미지 미리보기 (프리뷰)

사용자의 UX적인 측면을 고려할 때 이미지 미리보기는 필수적인 기능이라 생각한다.

폼 구성

사진과 비슷한 폼을 구성해준다.
이제 코드로 살펴보자.

코드

const [prevImage, setPrevImage] = useState<string | undefined>();

const prevImg = (event: React.ChangeEvent<HTMLInputElement>): void => {
        const fileInput = event.target;
        if (fileInput.files && fileInput.files[0]) {
            const imgFile: File | null = fileInput.files[0];
            setFile(imgFile);
            // make preview url
            const imageUrl: string = URL.createObjectURL(imgFile);
            setPrevImage(imageUrl);
        }
    };

State

const [prevImage, setPrevImage] = useState<string | undefined>();

우선 파일과 이미지를 담을 state를 선언해준다.

Function

const prevImg = (event: React.ChangeEvent<HTMLInputElement>): void => {
        const fileInput = event.target;
        if (fileInput.files && fileInput.files[0]) {
            const imgFile: File | null = fileInput.files[0];
            // make preview url
            const imageUrl: string = URL.createObjectURL(imgFile);
            setPrevImage(imageUrl);
        }
    };

이미지를 보여줄 공간 즉 div안에 있는 img 태그가 변할것이기 때문에 event는 ChangeEvent가 필요하다

event.target에 있는 files 로 이미지 파일을 불러온다.
불러온 이미지 파일을 blob으로 변환시키기위해 URL.createObjectURL 메서드를 사용한다.

<label>
  <div>
    <Image className='cursor-pointer'
      	   src={prevImage ?? '/img/avatar.png' }
           alt='avatar'
      	   width={200}
      	   height={200}quality={100}
    />
  </div>
  <input
    type='file'
    className='hidden'
    onChange={prevImg}
    accept='image/*'/>
</label>

본인은 Next.js 를 사용하였기 때문에 Image 컴포넌트를 사용하였다.
또한 tailwind 를 사용하였다.

label 태그안에 input 을 hidden 으로 주게되면 이미지 클릭시 input 이 실행된다.