AWS S3 Storage에서 image 가져오기

/components/Image/Image.tsx

import React, { useState, useEffect } from "react";
import { Storage } from "aws-amplify";

async function fetchImage(src, updateSrc) {
  // const image = await S3.getimage(src)
  if (!src.includes("downloads")) {
    const image = await Storage.get(src);
    updateSrc(image);
  } else {
    updateSrc(src);
  }
}

const Image = ({ src, ...props }) => {
  const [imageSrc, updateSrc] = useState(null);
  useEffect(() => {
    fetchImage(src, updateSrc);
  }, [src]);

  return imageSrc ? <img src={imageSrc} {...props} /> : null;
};

export default Image;

async / await 를 사용하여 fetchImage함수 실행이 끝나고 image의 경로를 받아온다.

useEffect를 사용하여 src를 updateSrc로 변경한다.

/components/ProductsCard.tsx

import React from "react";
import router from "next/router";
import { makeStyles } from "@material-ui/core/styles";
import { Card } from "@material-ui/core";
import CardActionArea from "@material-ui/core/CardActionArea";
// import CardActions from '@material-ui/core/CardActions';
import CardContent from "@material-ui/core/CardContent";
import CardMedia from "@material-ui/core/CardMedia";
// import Button from '@material-ui/core/Button';
import Typography from "@material-ui/core/Typography";
import { ProductState } from "../redux/types/productTypes";
import CardMediaImage from "./Image/CardMediaImage";

const useStyles = makeStyles({
  root: {
    maxWidth: 345,
    margin: 10,
  },
  media: {
    height: 140,
  },
});

interface Props {
  item: {
    id: string;
    name: string;
    thumbImage: {
      key: string;
    };
    price: number;
  };
}

const ProductCard: React.FunctionComponent<Props> = ({ item }) => {
  const newProduct = item;

  const classes = useStyles();

  const showDetailPage = () => {
    router.push("../detail/new_detail");
  };

  return (
    <>
      <Card className={classes.root}>
        <CardActionArea onClick={showDetailPage}>
          <CardMediaImage
            className={classes.media}
            src={item.thumbImage.key}
            title={item.name}
            alt={item.name}
          />
          <CardContent>
            <Typography gutterBottom variant="h5" component="h2">
              {item.name}
            </Typography>
            <Typography variant="body2" color="textSecondary" component="p">
              {item.price}원
            </Typography>
          </CardContent>
        </CardActionArea>
      </Card>
    </>
  );
};

export default ProductCard;

이미지의 경로를 item의 thumbImage의 key로 설정하여 이미지를 받아온다.