[React.js] Hover 버튼 만들기

WRITTEN BY

yoyounn18

한국어보다 자바스크립트를 더 잘 하는게 목표.
Sign in to view email

React.js를 이용하여 About Me 페이지를 만들던 중 state의 개념과 onMouseOver을 이용하여 Hover(마우스 오버시 반응하는 것) 버튼을 만들어보았다.

    import React, { Component } from 'react';
import './HoverBtn.css'
class HoverBtn extends Component {
  constructor(props) {
    super(props);
    this.handleMouseHover = this.handleMouseHover.bind(this);
    this.state = {
      isHovering: false,
    };
  }

  handleMouseHover() {
    this.setState(this.toggleHoverState);
  }

  toggleHoverState(state) {
    return {
      isHovering: !state.isHovering,
    };
  }

  render() {
    return (
      <div >
        <div
        className="hover-btn"
          onMouseEnter={this.handleMouseHover}
          onMouseLeave={this.handleMouseHover}
        >
        {this.state.isHovering
        &&<div className="hover-inner" >
          프로젝트명
          </div>}
      </div>
      </div>
    );
  }
}

export default HoverBtn;

이렇게 구성하면 마우스를 대면 새로운 div가 만들어져 추가적인 효과 구성이 가능하다. 11월 내에 완성된 About Me 페이지를 공개할 수 있을것 같다.

작성된 댓글이 없습니다!

로그인된 사용자만 댓글을 작성할 수 있습니다.

이 작성자가 게시한 다른 글