Base64를 사용해서 이미지를 전달해보자 (2) - 이미지 불러오기 및 선택하기 (Decoding)

1. 컴포넌트가 전부 마운트 되기 전 이미지들을 DB에서 받아오기 위해 useEffect Hook을 사용하고, imageList에 저장한다.

const [imageList, setImageList] = useState();

const getImageApi = async () => {
  let res = await axios.get('서버주소');
  setImageList(res.data);
};

useEffect(()=>{
  getImageApi();
}, []);

2. 읽어온 이미지들을 화면에 보여준다.

서버로 Java Spring을 사용했다고 가정한다. Java에서는 Blob 데이터를 바로 Binary로 응답보내는 것이 아니라, Blob to String 작업을 거친 뒤에 응답을 보낸다. 따라서 클라이언트단에서 String to Base64 작업을 해줘야 한다.

<div>
  {
    imageList && imageList.map((item, idx) => {
      let convertedCode = Buffer.from(item, "base64");
      
      return (
        <img
          key={`image-${idx}`}
          style={{ maxWidth: "100%", height: "auto" }}
          src={`data:image/;base64,${convertedCode}`}
          alt={`image-${idx}`}
        />
      );
    })
  }
</div>

3. 클릭한 이미지 정보를 저장할 clickedImage를 만들고, 이미지를 클릭하면 동작하는 onClickImage 함수를 img 태그에 붙여준다. 클릭된 이미지는 컬러로, 클릭되지 않은 이미지는 흑백으로 보이도록 img 태그에 조건부 스타일을 추가해준다.

const [clickedImage, setClickedImage] = useState({
  item: "",
  convertedCode: "",
});

const onClickImage = (item) => {
  let convertedCode = Buffer.from(item, "base64");
  setClickedImage({item: item, convertedCode: convertedCode});
};

<div>
  {
    imageList && imageList.map((item, idx) => {
      return (
        <img
          key={`image-${idx}`}
          style={{
            maxWidth: "100%",
            height: "auto",
            filter: clickedImage.item === item ? "grayscale(0%)" : "grayscale(100%)"
          }}
          src={`data:image/;base64,${item}`}
          alt={`image-${idx}`}
          onClick={()=>{
            onClickImage(item);
          }}
        />
      );
    })
  }
</div>