React - 이벤트가 일어나는 요소의 클래스명 가져오기

 

기존 코드

 

//생략
        this.div = React.createRef();
    }

    hoverEvent = (e) => {
            e.target.style.background = "#eee";

    }

    outEvent = (e) => {

            e.target.style.background = "white";

    }

    componentDidMount() {
        this.div.current.addEventListener("mouseover", this.hoverEvent);
        this.div.current.addEventListener("mouseout", this.outEvent);
    }

    componentWillUnmount() {
        this.div.current.removeEventListener("mouseover", this.hoverEvent);
        this.div.current.removeEventListener("mouseout", this.outEvent);
    }
    
   //생략
   
   
    render() {
        const nemo_count = Array.from({length: this.state.count}, (v, i) => (i))
        return (
            <div className='Main' ref={this.div}>
                    {nemo_count.map((num, idx) => {
                        return (
                            <NemoBox key={idx} className='imNemo'>nemo{idx}</NemoBox>
                        )
                    })};
//생략

 

해당 div의 background 에만 hover이벤트를 주고싶었는데

위코드를 사용하니

 

 

이렇게 모든 요소의 색이 바뀌어버린다

현재 같이 프로젝트를 진행하는 프론트분들에게 여쭤보니 div를 따로 나누라고 하셨는데

div를 나눠서 진행하면 다른영역의 배경이 바뀌게 되기에 생각하던 해답은 나오지않았다

 

구글링을 좀 해보니

e.target.className으로 해당 클래스의 이름을 가져올수있길래

 

    hoverEvent = (e) => {
        if(e.target.className === 'Main'){
            e.target.style.background = "#eee";
        }
    }

    outEvent = (e) => {
        if(e.target.className === 'Main'){
            e.target.style.background = "white";
        }
    }

 

위처럼 코드를 수정했더니

 

 

 

원하는 결과를 얻을수 있게되었다

 

 

요약: e.target.className으로 이벤트가 일어나는 대상의 클래스명을 가져올수있음