[React] Sub-page 상품이미지 hover시 이미지변경

📌목표

sub-page에 있는 item들에 마우스를 올리면 모델이미지에서 제품이미지로 hover되게 useState , 삼항연산자를 이용하여 구현

Sub.js

• 기본상태는 false로 지정하여 이미지가 호버되지않게 설정
• 삼항연산자를 이용하여 마우스가 올라갔을때를 hoverimg 설정, 마우가 벗어낫을때 defaultimg설정함
• onMouseEnter,onMouseLeave 이벤트 핸들러를 적용하여 setHovered에 상태를 업데이트함

    const [isHovered, setIsHovered] = useState(false);
    
       <ul className="content-block">
                {data.map((item) => (
                    <li
                        key={item.id}
                        onClick={() => handleDetailClick(item.id)}
                    >
                        <div className="product-info">
                            <div className="product-img">
                                <img
                                    src={isHovered ? item.images[0].hoverimg : item.images[0].defaultimg}
                                    onMouseEnter={() => setIsHovered(true)}
                                    onMouseLeave={() => setIsHovered(false)}
                                    alt={item.code}
                                    className="default-img"
                                />
                            </div>
                           

❗ 문제발생

item 마우스가 올라간 이미지만 hover되지 않고,
모든 item들의 이미지가 변경 되는 오류 발생
상태관리 할때, 각 item들의 hover된 상태를 관리해야하는데, 전역적으로 관리하는 함수를 만들어서 발생한것으로 보임

그래서 각 item들의 id를 가져와서 hover한 id를 추적하여 이미지를 변경하는 함수로 변경하도록 함!

hover된 상품의 id를 관리하는 useState 상태관리 함수를 생성!

    const [hoveredItemId, setHoveredItemId] = useState(null);
   

    const handleMouseEnter = (id) => {
        setHoveredItemId(id);
    };

    const handleMouseLeave = () => {
        setHoveredItemId(null);
    };

img에 handleMouseEnter 함수를 적용하여 해당 item의 id를 가져온 뒤
hoveredItemId가 가져온 item의 id와 같다면 hoverimg를 보이게 하고, 그렇지않다면, 기본이미지를 보이게 설정

 <ul className="content-block">
     {data.map((item) => (
        <li
           key={item.id}
           onClick={() handleDetailClick(item.id)}
         >
              <div className="product-info">
                    <div className="product-img">
                         <img
                             src={
                             hoveredItemId === item.id ? item.images[0].hoverimg : item.images[0].defaultimg
                                    }
                                    onMouseEnter={() => handleMouseEnter(item.id)}
                                    onMouseLeave={handleMouseLeave}
                                    alt={item.code}
                                    className="default-img"
                                />
                            </div>