React, 상품 이미지 토글

상품의 첫번째 이미지에 마우스를 호버했을때 아래와 같이 모델착용이미지로 전환하는 함수를 적용해보았다.

어찌보면 그리 어려운게 아니고 간단하다. ( js면 그냥 뚝딱!.. )

그런데 지금 js만큼은 익숙치못하고 낯가리고있는 리액트였던점과,
저 swiper 라이브러리를 사용하고 있어 어디까지 손대야 하는지모를 수식어들,
그리고 이미지들과 상품 정보들이 담긴 js파일에서 import 해서 map함수로 최대한 간결하게 작성해야했던것 으로 조금 복잡했던것.

1. 데이터.js

일단 상품의 이미지들과 정보가 담긴 js파일을 작성해서 import해왔다.

import bt0 from "./img/1bt.jpg"
import bt02 from "./img/1bt2.jpg"
import bt1 from "./img/2bt.jpg"
import bt12 from "./img/2bt2.jpg"
import bt2 from "./img/3bt.jpg"
import bt22 from "./img/3bt2.jpg"
import bt3 from "./img/4bt.jpg"
import bt32 from "./img/4bt2.jpg"

.
.
.


let items = [
    {
      id: 0,
      title: "아톰 후디 남성",
      price: "450,000",
      primaryImg: bt0,
      secondaryImg: bt02,
      desc:'미드레이어 혹은 아우터로 활용가능한 경량, 다용도의 합성 보온 후디'

    },
  
    {
      id: 1,
      title: "[SS24] 캐리어 40 더플",
      price: "400,000",
      primaryImg: bt1,
      secondaryImg: bt12,
      desc:"단일 및 멀티데이 여행에 적합한 내구성이 뛰어나고 내후성이 우수한 40L 장비 트레일러"
    },
  
    {
      id: 2,
      title: "세륨 후디 남성",
      price: "650,000",
      primaryImg: bt2,
      secondaryImg: bt22,
      desc:"미드레이어 혹은 아우터로 활용가능한 가볍고 따뜻한 알파인용 후디."

      
    },
    {
      id: 3,
      title: "[SS24] 스몰 버드 햇",
      price: "75,000",
      primaryImg: bt3,
      secondaryImg: bt32,
      desc:"고강도 아웃도어 활동을 위한 경량의 기능성 볼캡"
    },
    {
      id: 4,
      title: "아로 22 백팩",
      price: "350,000",
      primaryImg: bt4,
      secondaryImg: bt42,
      desc:'아이코닉한 디자인의 커뮤터 22L 데이팩'

    },
    
  .
  .
  . 

  export default items;

2. 토글함수 만들기

📌 기존의 이미지 : primaryImg
📌 토글변경 이미지 : secondaryImg

📌 handleMouseEnter : 마우스가 올라가면 secondaryImg로 변경
📌 handleMouseOut : 마우스가 나가면 기존의 primaryImg로 변경

const ImgToggle=({primaryImg, secondaryImg})=>{
const imgRef = useRef(null);

const handleMouseEnter = () => {
  imgRef.current.src = secondaryImg;
  
}
const handleMouseOut =() =>{
  imgRef.current.src = primaryImg;
  
}

return(
  <img className="tgimg"
    onMouseEnter={handleMouseEnter}
    onMouseOut={handleMouseOut}
    src={primaryImg}
    alt=""
    ref={imgRef}
  />
)

}

3. 토글함수 적용

<div className ="section1 section">
	<div className="container-wrap"> 
  	<h3 className="section-title">WEEKLY BEST ITEM</h3>
      	<Swiper
          	slidesPerView={5}
          	spaceBetween={50}
          	grabCursor={true}
          	pagination={{
          	  clickable: true,
          	}}
          	navigation={true}
          	modules={[Pagination, Navigation]}
          	className="mySwiper"
          	ref={oneElement}
          >
          {items.map((item, index) => (
          	<SwiperSlide key={index} className="swiperslide">
				<ImgToggle primaryImg={item.primaryImg} secondaryImg={item.secondaryImg} alt="" />
					<div className="itemInfo">
              		<p className="pt-3 mb-1">{item.title}</p>
              		<p className="bf6">{item.price}</p>
						<p className="pb-1 smaller">{item.desc}</p>
              </div>
          	</SwiperSlide> ))}

			</Swiper>
		</div>
	</div>

아, 그런데 아직 해결하지못하고있는것 하나
이미지에 transition-duration 적용이 안되고있음.