프로젝트의 임무로 Nav바를 만들게 되었다. Dropdown 메뉴가 원하는대로 동작 하기까지 꽤 시행착오가 있었지만 소소한 성취가 있었다.
우선 Nav 바에서 DropDown 메뉴가 동작하는 모습을 보도록 하겠다.
마우스 커서를 자전거 메뉴에 올려놓으면 DropDown 메뉴가 렌더링 되고 마우스가 DropDown에서 떠나면 렌더링이 종료된다.
자 이제 코드로 차근차근 살펴보도록 하자!
우선 State 를 선언해준다.
const Nav = () => {
const [navRender, setNavRender] = useState(false);
그리고 setNavRender를 true로 바꿔주는 콜백을 선언해준다.
const popNavBar = () => { setNavRender(true); };
이제 모든 준비는 완료 되었다.
이제 만들어둔 콜백함수를 자전거 메뉴가 있는 테그에 onMouseOver로 넣어준다.
<li className="topFontLeft" onMouseOver={popNavBar}> 자전거 </li>이렇게 되면 마우스가 자전거 메뉴에 올라갈 때마다 state값을 true로 바꿔주게 된다.
다음으로 자식 컴포넌트인 DropDown 메뉴 컴포넌트를 state값으로 감싸준다.
{navRender && <DropDown navRender={setNavRender} />}
자 이제 여기까지 완료한다면 자전거 메뉴에 마우스를 올려놓을시 DropDown 메뉴가 렌더링 된다.
다음으로 DropDown메뉴에서 마우스 커서가 벗어나면 렌더링 되던 DropDown메뉴가 사라지도록 해보겠다.
우선 자식컴포넌트인 DropDown 으로 들어가서 Props로 넘겨준 navRender를 등록해준다.
const DropDown = ({ navRender })
다음 navRender를 false값으로 바꿔주는 콜백을 선언해준다.
const dropLeave = () => { navRender(false); };
준비는 완료. 다음으로 DropDown 컴포넌트의 최상위 테그에 미리 선언한 콜백 함수를 onMouseLeave로 넣어주면 끝난다.
<div onMouseLeave={dropLeave}>
느낀점
처음에 Nav에 있는 자전거 메뉴 테그에 const popNavBar = () => { setNavRender(!navRender); }; 로 state를 줘서 자전거 메뉴에 마우스 커서를 가지고 갈때마다 state의 값이 true, false, true, false... 로 바뀌거나 DropDown에서 마우스가 벗어나도 렌더링이 계속 되는 등 의 시행착오가 있었다.
결론적으로 state값에 true나 false를 직접적으로 주는 간단한 방법으로 해결하였지만 여기까지 도달하기 위해 해봤던 다양한 시도와 생각들은 값진 경험이 되었다.
앞으로도 다양하게 생각하고 시도해보는 개발자가 되겠다.
그리고 언젠간 꼭 훌륭한 개발자가 되겠다.
