React | Preview로 이미지 미리보기

유저 입장에서 이미지파일을 올리면 미리보기 기능이 없다면 서비스에 대한 만족도가 떨어질 수 있다. 프로젝트를 진행하며 미리보기 기능을 구현하려고 하였고, 좋은 오픈소스를 발견하여 이것을 활용하여 조금 수정을 하였다. styled-component로 입맛에 맞게 이미지 크기나 투명도 등을 고쳐 쓰시길 바란다.

/Preview.jsx
import React from 'react';
import { useState } from 'react';
import { useEffect } from 'react';
import styled from 'styled-components';

const Preview = ({ img }) => {
  const reader = new FileReader();
  const file = img;

  const [imgSrc, setImgSrc] = useState('');

  useEffect(() => {
    if (file) {
      reader.readAsDataURL(file);
      reader.onloadend = () => {
        setImgSrc(reader.result);
      };
    }
  });

  return <PreviewImage src={imgSrc} />;
};

export default Preview;

const PreviewImage = styled.img`
  margin-top: 20px;
  height: 400px;
  width: 400px;
  object-fit: cover;
`;