개발자로한걸음
363
2021-02-23 18:21:35
2
86
#875277 Tech Q&A

리액트 hover 이벤트 질문입니다.


여기 칸마다 로고가 들어가고 마우스가 올라가면 문구가 올라가도록 하고 싶은데요

json 반복문을 써서 로고를 받아와서 뿌리는건 성공했는데 

hover 이벤트를 적용하려고하니까.  전체가 다 적용이 되는데요.  인덱스로 각각 hover를 해야한다고 알려줘야하나요?? 



const Icorn = styled.img`
padding:4px;
vertical-align:middle;
display:block;

&.hidden{
  display:none;
}
`
const Ul = styled.ul`
width:75%;
display:grid;
grid-template-columns:190px 190px 190px 190px 190px; 
margin: 0 auto;
@media ${({ theme }) => theme.device.tablet} {
 display:none;
  
}
`


const Wrap =()=>{
  const [visible, setVisible] = useState(false);  
  const pIcornWrap = partnerIcons.map((item, index)=>{
    return(
      <Li key={index}>
        <Icorn src ={item.image} onMouseOver={()=>{setVisible(!visible);}} onMouseDown={()=>{setVisible(!visible);}} className={visible? 'show':'hidden'}></Icorn>
      </Li>
    )
  });
  return(
    <div>
      
      <Ul>
        {pIcornWrap}
      </Ul>
      <MobileView><PartnersPage/></MobileView>
    </div>
  )
  
}
json 파일
[
  {
    "image":"../img/1_a.png"
  },
  {
    "image":"../img/1_b.png"
  },
  {
    "image":"../img/1_c.png"
  }]

0
0

  • 답변 2

  • 킁킁탐정
    715
    2021-02-23 18:57:51

    보통 이 경우 JSON에 존재하는 이미지 항목 1개당 하나의 상태(useState)가 필요합니다. 이 상태를 묵어서 사용하는것보다 개별 컴포넌트로 별도로 만들어서 사용하면 됩니다.

    https://codesandbox.io/s/wonderful-glade-xtzh5?file=/src/App.js


    function ListItem({ src }) {
    const [visible, setVisible] = useState(false);

    return (
    <div
    onMouseEnter={() => setVisible(true)}
    onMouseLeave={() => setVisible(false)}
    style={{ border: "1px solid red", width: 200, height: 200 }}
    >
    <img src={src} className={visible ? "show" : "hidden"} alt="" />
    </div>
    );
    }

    const data = [
    {
    image: "https://images.unsplash.com/photo-1593642532009-6ba71e22f468"
    },
    {
    image: "https://images.unsplash.com/photo-1613963991007-de23ae6be55f"
    }
    ];
    export default function App() {
    return (
    <div>
    {data.map((item) => (
    <ListItem key={item.image} src={item.image} />
    ))}
    </div>
    );
    }
    0
  • 개발자로한걸음
    363
    2021-02-24 13:54:02

    킁킁탐정  

    정말 감사합니다! 저렇게 따로 빼서 처리하면되는군요!! 예시랑 함께 알려주셔서 문제 해결 잘할수 있었어요 ㅠㅠ! 

    1
  • 로그인을 하시면 답변을 등록할 수 있습니다.