[ React ] display:none 효과 적용하기

오늘 해더 네비게이션 바를 만드는데 리액트에서 css를 할 때 직접적인 스타일 적용(css 파일에서 스타일 적용)이 안되는 것을 확인하였다.
display:none과 z-index가 안먹었다.

display:none인 엘리먼트를 hover시 display:block이 되도록 어떻게 적용했는지 설명하고자 한다.

내가 최종적으로 구현한 결과이다.

원래 상태는 display:none 이였다가, hover를 하면 display:block 상태가 되어 유저 아이콘의 서브 메뉴가 보여야된다.

문제

👉 리액트에서 display: none을 처음 설정을 하면, hover해도 diplay:block 상태로 되지 않는다.

처음에는 css 파일에서 내가 숨기고자하는 ul을 display:none으로 하고,
hover 가 되면 display:block이 되도록 했다

나의 css 파일

.userIconGng {
 position: relative;
}

.userIconGng ul {
 display: none;
 position: absolute;
 top:0;
 left:0;
}

.userIconGng ul:hover {
 display: block;
}

나의 jsx파일

<div className='userIconGnb'>
   <UserIcon />
   <ul>
     <li>마이페이지</li>
     <li>회원정보</li>
   </ul>  
</div>

이렇게 하면... 리액트 랜더링 시 랜더링이 되지 않아서 hover시 ul박스가 display: block으로 바뀌지 않는다. 하지만 콘솔창에 해당 ul 엘리먼트는 나와있었다.

여러 검색을 통해 해결책을 찾았다.

해결책

👉 아래 마우스이벤트를 사용하여 적용 스타일을 jsx파일에서 상태로 관리해줘야한다.
(단, 적용하고자하는 박스의 부모에게 마우스이벤트를 적용한다.)

onMouseEnter
onMouseLeave

나의 css 파일

.userIconGng {
 position: relative;
}

.userIconGng > ul {
 position: absolute;
 top:0;
 left:0;
}

나의 jsx파일

import { useState } from 'react';

const [ style, setStyle ] = useState({display: 'none'})

function Landing() {
  return (
    <>
    // 생략
    <div 
      className='userIconGnb'
      onMouseEnter={e => {
                    setStyle({display: 'block'})
          }}
      onMouseLeave={e => {
                    setStyle({display: 'none'})
      }}
     >
     <UserIcon />
     <ul style={style}>
       <li>마이페이지</li>
       <li>회원정보</li>
     </ul>  
    </div>
  // 생략
  </>
  )
}