[React오답노트] MouseEnter가 반응하지 않을 때

 

< 목표 >
사용자가 위의 화면에서 About us, Interpreation, Consulting 영역에 마우스를 얹으면,
오른쪽의 Hello, We are HanIn Bridge 영역의 화면이 알맞게 변화하는 UI를 만들어보자

Landing Engine code

import Wrapper from "../../styles/wrap";
import Img from "../../pages/landing/img"
import { FlexDiv, Ul } from "./style";
import { useState } from "react";
import { Link } from "react-router-dom";

// Main engine of Landing page
function Landing () {
    // Change currImg with using useState
    const [currImg, setCurrImg] = useState('default');

    // When user puts mouse on the li
    function handleMouseEnter(currState) {
        // change to proper img and rerender the UI
        setCurrImg(currState);
    }

    return (
            // Landing
            <Wrapper>
                <FlexDiv>
                    <Ul>
                        <li onMouseEnter={()=>handleMouseEnter('aboutus')}
                        onMouseLeave={()=>handleMouseEnter('default')}>
                           <Link to="/aboutus"><p>About us</p></Link>
                        </li>
                        <li onMouseEnter={()=>handleMouseEnter('interpretation')}
                        onMouseLeave={()=>handleMouseEnter('default')}>
                            <Link to="/interpretation"><p>Interpretation</p></Link>
                        </li>
                        <li onMouseEnter={()=>handleMouseEnter('consulting')}
                        onMouseLeave={()=>handleMouseEnter('default')}>
                            <Link to="/consulting"><p>Consulting</p></Link>
                        </li>
                    </Ul>
                    <Img currImg={currImg}></Img>
                    
                </FlexDiv>
            </Wrapper>
    );
};

export default Landing;

 

문제의 발생

마우스가 들어오면 handleMouseEnter 함수에 'aboutus'를 argument로 넣어 보내 이를 구현하고자 했는데,

다음 코드가 말을 듣지 않았다.

<li onMouseEnter={handleMouseEnter('aboutus')}
    onMouseLeave={handleMouseEnter('default')}>

해결 방안

무기명의 화살표 함수를 이용하였더니 해결되었다.

해결 코드

<li onMouseEnter={()=>handleMouseEnter('aboutus')}
    onMouseLeave={()=>handleMouseEnter('default')}>