hover시 이미지 변경할 때

[김현주]

선생님 안녕하세요... 리액트 복습 겸 혼자 만들고 있는데 막혀서 질문 드립니다.

이미지 hover시 이미지를 변경하려고 아래의 코드처럼 작성했는데 작동하지 않네요...

// App.js

const [isMouseHover, setIsMouseHover] = useState(false);

<RightContent>

...
            {
              bestProduct.map((item, i) => {
                return(
                  <ProductCard
                    bestProduct={bestProduct[i]}
                    isMouseHover={isMouseHover}
                    setIsMouseHover={setIsMouseHover}
                  />
                )
              })
            }

...
  </RightContent>

...

 

function ProductCard({bestProduct, isMouseHover, setIsMouseHover}){
  return(
    <>
      <div
        className="img-wrapper"
        onMouseOver={setIsMouseHover(true)}
        onMouseOut={setIsMouseHover(false)}
      >
       
        <div className="icon-wrapper">
          <BsSuitHeart />
        </div>
        <div className="bestseller">
          <h1>best seller</h1>
        </div>
        <div className="product-content">
            <h1>
              {bestProduct.name}
            </h1>
            <p>{bestProduct.price}원</p>
        </div>
      </div>
    </>
  )
}

[codingapple]

onMouseOver={()=>{ 실행할함수() }}

이렇게코드짭시다 

[김현주]

세상에 역시 리액트 초고수... 기본적인건데 몇 시간고민했네요 ㅠㅠㅠㅠㅠㅠ 감사합니다

[김현주]

선생님 하나 더 질문입니다..

이미지 하나를 hover하면 다른 이미지를 보여주고 싶은건데 이게 map으로 묶어서 그런건지 다같이 hover가 됩니다.

이럴땐 무엇을 써야할까요.. 힌트라도 주시면 감사하겠습니다

아래 이미지는 현재 hover시 상태고..

아래의 이미지가 원하는 상태 입니다.

 

[codingapple]

마우스올렸는지 여부를 저장하는 state가 true면 이미지 바꾸라고 코드짠건가요 

그럼 이미지가 4개면 마우스올렸는지 저장할 state도 4개가 필요하겠군요 

 

아니면 이미지 src주소만 변경하는거면

마우스올리면 이미지 src 변경해주세요~라고 코드만 짜도 될듯요 

[김현주]

처음에는 state에 false로 저장 후 mouseover시 true로 변하게 했었는데 이미지가 4개가 다 바뀌어서 엄청 고민하다가 질문드린거였거든요...

state 4개를 다루는 걸 고민하다가 일단은 두번째로 써있는 src주소만 변경 하는 걸로 해결됐습니다. ㅠㅠㅠ

state 4개로 다루는 코드도 한번 짜보도록 하겠습니다!!! 답변 정말 감사합니다 선생님!!!!

[글쓴이]

글