react toggle 간단히 토글메뉴 구현하기 (useState)

리액트 관련해서 혼자 클론코딩식으로 버거킹 사이트를 모바일 버전일 때 특정해서 구현하고 있는데 어떠한 사이트든 사이드 메뉴, 혹은 내비게이션 바 부분을 토글식으로 구현해 놓은 곳은 많을 것이다. 한번 상태값을 관리해주는 useState훅을 이용해서 구현해보자 

 

사진처럼 왼쪽 상단의 메뉴 버튼을 누르면 왼쪽에서 오른쪽으로 메뉴바가 쇼로록 나오게 만들면 되는 것이다. 

 

우선 해줘야 할 것은 토글할 메뉴리스트의 상태를 관리하기 위해 useState를 사용해주는 것이다. 

 

  import React,{useState} from 'react';
  
  
  const Header = () => {
  
  const [isOpen, setMenu] = useState(false);  // 메뉴의 초기값을 false로 설정
  
  const toggleMenu = () => {
        setMenu(isOpen => !isOpen); // on,off 개념 boolean
    }
  
    return(
        <div className="header">
                <ul className="header-wrapper">
                    <li><MenuIcon onClick={()=>toggleMenu()}></MenuIcon></li>  // 클릭되었을 때 준비한 함수 호출! on off 개념                     
                    <li><img width="45px" src="https://www.burgerking.co.kr/dist/img/logo_titleBar.e89f6852.png"></img></li>
                    <li>
                        <Button
                            variant="contained"
                            color="secondary"
                            size="small"
                            style={buttonStyles}
                        >
                            딜리버리주문 >
                        </Button>
                    </li>
                </ul>
                <ul className={isOpen ? "show-menu" : "hide-menu"}> // 삼항연산자 true 일 때 클래스명 show-menu, false일때 hide-menu
                        <li >1</li>
                        <li >2</li>
                        <li >3</li>
                        <li >4</li>
                </ul>
        </div>
    )
  
  
  
  
  }
  
  export default Header
  
  
 //ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ 스타일링 부분 ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ//  
  
  .show-menu{
width: 376px;
height: 500px;
position: absolute;
left: 0px;
transition: 1s;
}

.hide-menu{
width: 376px;
height: 500px;
position: absolute;
left: -376px;
transition: 1s;
}
  
 // 물론 이렇게 겹치는 부분이 많으면 공통된 클래스명으로 더 간결하게 할 수 있겠지만 
 // 테스트용으로 그냥 이렇게 작성했다 .

 

 

 

간단히 3단계로 나누자면

 

1. 관리해줄 메뉴 상태값 useState() 이용

 

2. 클릭 되었을 때 on off 시킬 함수 구현

 

3. true, false 일 때의 클래스명으로 스타일링 완성  

 

끝!