[React.js] Hover 버튼 만들기

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 페이지를 공개할 수 있을것 같다.