2024.05.30(2) 기록

포트폴리오 마우스 Hover 효과 (onMouseOver, onMouseLeave)

app.js

const [bigMouse, setBigMouse] = useState(false);

const smallCircle = () => {
	setBigMouse(false);
  }

const bigCircle = () => {
	setBigMouse(true);
  }

ㄴ 커지고 작아질 값을 저장하기 위해 useState 선언
ㄴ 기본 마우스 효과는 false로 지정 ---> smallCircle
ㄴ hover커서 마우스 효과는 true로 지정 ---> bigCircle

<div className={bigMouse == false ? 'circle' : 'circle Big'} ></div>
<div className={bigMouse ? 'circle Big' : 'circle'}></div>

ㄴ 마우스 div에 삼항연산자 사용해서 기본 false로 조건 선언 (2가지)

return (

      <header onMouseMove={mouseHandle}>
        <div onMouseOver={bigCircle} onMouseLeave={smallCircle}>
          <Link to="/home" onClick={menuTop} >ZIIIIIIIIY</Link>
        </div>
        <nav onMouseOver={bigCircle} onMouseLeave={smallCircle}>
          <Link to="/about2" onClick={() => menuclick(menuRef.current[1])}>About</Link>
          <Link to="/project" onClick={() => menuclick(menuRef.current[2])}>Project</Link>
          <Link to="/contact" onClick={() => menuclick(menuRef.current[3])}>Contact</Link>
        </nav>

      </header>

      <main>
        <div className={bigMouse == false ? 'circle' : 'circle Big'} style={{ transform: `translate(${mouseX}px, ${mouseY}px)` }}></div>
        
        <section ref={(el) => { menuRef.current[0] = el }} className="home"><Home menuclick={menuclick} menuRef={menuRef} mouseHandle={mouseHandle} /></section>
        <section ref={(el) => { menuRef.current[1] = el }} className="about2"><About2 menuclick={menuclick} menuRef={menuRef} data={dataJson} mouseHandle={mouseHandle} bigCircle={bigCircle} smallCircle={smallCircle} /></section>
        <section ref={(el) => { menuRef.current[2] = el }} className="project"><Project menuclick={menuclick} menuRef={menuRef} data={dataJson} mouseHandle={mouseHandle} bigCircle={bigCircle} smallCircle={smallCircle} /></section>
        <section ref={(el) => { menuRef.current[3] = el }} className="contact"><Contact menuclick={menuclick} menuRef={menuRef} mouseHandle={mouseHandle} bigCircle={bigCircle} smallCircle={smallCircle} /></section>
      </main>

  );

ㄴ 같은 app.js (ex. header)에서는 바로 이벤트 함수를 실행 가능!!
onMouseOver={bigCircle} onMouseLeave={smallCircle}

다른 컴포넌트로는 마우스 데이터처럼 똑같이 새로운 함수데이터 2개를 보내야함!
bigCircle={bigCircle} smallCircle={smallCircle}

About2.jsx

function About2({ data, mouseHandle, bigCircle, smallCircle }) {

    return (
    
    <article className='about_main' onMouseMove={mouseHandle}>
    	.
    	.
    	<div className='link' onMouseOver={bigCircle} onMouseLeave={smallCircle}
        .
        .
        </div>
    </article>

ㄴ 원하는 태그에 함수데이터({bigCircle, smallCircle}) 2개 받고 사용하기!

common.css

        .circle {
            width: 30px;
            height: 30px;

            &.Big {
                width: 60px;
                height: 60px;
            }
        }