react onClick 시 fadein 되는 효과

초 간단. 단점은 같은 이미지를 눌러도 fadein이 된다는 것ㅠ

const datas = [
    {
        name: "sunglasses",
        img: [
            "",
            "",
            ""
        ]
    },
]

일단 이런 식으로 배열 안의 이미지 배열을 만들어 줬다.

  const datalistimg = datas.map((item) => {
        return item.img[0];
    })

  const [currentItem,setCurrentItem] = useState(datalistimg);

일단 첫번 째 사진을 썸네일로 사용하기 위해 currentItem 안에 첫번 째 이미지를 넣었다.

  const [start, setStart] = useState(false);

  const handleAnimation = () => {
    setStart(true);
    setTimeout(() => {
       setStart(false);
     }, 300);
    }

start가 true가 되었다가 3초 뒤 false가 된다.

import { useState } from 'react';
import styled from 'styled-components';

export const Example = () => {
    const [start, setStart] = useState(false);

    const datalistimg = datas.map((item) => {
        return item.img[0];
    })

    const [currentItem,setCurrentItem] = useState(datalistimg);

    const handleAnimation = () => {
        setStart(true);
        setTimeout(() => {
            setStart(false);
        }, 300);
    }

    return (
        <Container>
            {datas.map((data) => {
                 const imglist = [`${data.img}`];
                return (
                    <Contain>
                        <Thumbnail className={`${start && "fade"}`}>
                            <img src={currentItem} />
                        </Thumbnail>
                        <ImgList>
                        {imglist.map((x) => {
                                    const img = x.split(',', 3);
                                    return (
                                        <DataImgWrap>
                                            <li>
                                                <img onClick={() => { setCurrentItem(img[0]); handleAnimation(); }} src={img[0]} /></li>
                                            <li>
                                                <img onClick={() => { setCurrentItem(img[1]);  handleAnimation(); }} src={img[1]} /></li>
                                            <li>
                                                <img onClick={() => { setCurrentItem(img[2]);  handleAnimation(); }} src={img[2]} /></li>
                                        </DataImgWrap>
                                    )
                                })}
                        </ImgList>
                    </Container>
                )
            })}
        </Container>
    )
}

start가 true면 fade가 활성화 된다.
styled-components를 사용했지만 그냥 index.css에 넣어줬다.

@keyframes fade {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.fade {
  animation-name: fade;
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
  animation-direction: alternate-reverse;
  transition:0.3s ease;
}

그럼 끝이다.

목록에서 클릭해서 나온 상세페이지라고 가정했을 때

  const { id } = useParams();
    const datalist = datas.filter(list => list.id == id);
    const datalistimg = datalist.map((item) => {
        return item.img[0];
    })

    const [currentItem, setCurrentItem] = useState(datalistimg);