JSX - 마우스 오버/아웃 효과

마우스 오버와 아웃 효과에 따른 스크립트를 작성할 때 아래와 같이 JSX에서 엘리먼트 안에 넣어 주면 된다.


<img      
      src='icon.jpg'
      onMouseOver={(event) =>{ 마우스 오버시 스크립트}}
      onMouseOut={(event) => { 마우스 아웃시 스크립트 }}
/>

바로 스크립트를 작성해 넣지 않고, 작성된 컴포넌트 안에 선언한 인수를 실행할 수도 있다.
<img      
      src='icon.jpg'
      onMouseOver={(event) =>{ this.handlerOver(event);}}
      onMouseOut={(event) => { this.handlerOut(event); }}
/>

 

TOP